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Dreamweaver 


Flash 


WordPress 


0HTML5 3 CSS3 jQuery 


GET DYNAMIC 
WITH EDGE 

Leverage new jQuery support from 
Adobe’s HTML5 editor 


Photoshop 

BUILD eSHOPS 
WITH WORDPRESS 

Integrate eCommerce functionality 
with the WooCommerce plug-in 


rPCr ^^^^ee-insideback 

r AEiEi \m*U WwW cover for more.. 

80+ minutes of pro video tuition. 
70 social media icons, 50 loops, 
82 brushes, Oaken Bucket font 



How to maximise your hits, visits, views & uniques 


ALL ABOUT SHOUT 

Award-winning agency 
Shout Digital on why brand 
positioning matters most 



HOWTO 

Apply user management to Rubv apps 

Add Mozilla BrowserlD authentication 

Bring SketchUa models to the web 




























Everything you need 
to work better online 
from Fasthosts 

That’s not just a web-hosting package, a domain 
name, a virtual or dedicated server, broadband, 
hosted email or online backup. It’s also 24/7 
support over the phone and online. 

Your work doesn't stop at 5:30pm P so neither 
d o we, Th at’s why yo uTI get su pport o n ou r 
technology from friendly experts 24/7. But the 
best thing about our 24/7 support Is that you 
probably wont need to use it 

Find out how your business can work better online 

catt free on 0800 6520 444 
or visit www.fasthosts.co.uk 

You’ll find some great offers there too. 


Fasthosts 


hosting | domains | dedicated & virtual servers | reseller hosting | online backup 
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Welcome 
to the issue 



THE WEB DESIGNER MISSIO: 


« To be the most accessible and 
inspiring voice for the industry, j 
i offering cutting-edge features 
and techniques vital to 
building future-proof Mark 
online content M : Bfflen 
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Highlight 



In terms of 
'Shout* my ethos 
was simple: a 
single word that 
people could spell 
easily say quickly 
and remember 

Gary Boon. the managing 
director of Shou t Digital 
describes how he arrived at 
the agency's name. Page 32 


Ever wondered why Google cares about us just so very much? 


iiiiiEiiiili E struck me the other day that we're 
i probably a Iready i nto a gene rati o n 
of web users who don't see the 
internet as anything beyond Google. 

_ jrjjjj j p Many wi II be too young to 

remember a world without it, and 
even those longer in the tooth almost 
exclusively refer to going online as 
'Googling'. The thing is, they are so good at sneaking 
into ail our web activities that the Googie influence goes 
from strength to strength with users and webmasters 
alike. This issue we'ne looking specifically at the Analytics 
part of the service and how pivotal these free tools can 
be to helping gauge content performance. Our feature 
from m ge 38 helps to explain why this is so beneficial, 
but it did get me thinking about why it would matter 
enough to Google. Well, although they are undoubtedly 


a friendly bunch, it has always been in their interest for 
our sites to be popular but also more open to being 
measured. By persuading us of the importance of web 
metrics alongside the dangling of the carrot of freely 
accessible reporting tools, they too are privy to pretty 
valuable information. That's if they didn't already know 
it. of course. Ultimately though the aim is not just to 
help you optimise your own little slice of the world but 
also to enhance the collective quality or performance of 
the wider web world Google purveys. More dicks and 
more hits equates to good advertising fodder and the 
lifeblood that keeps the big G' machine ticking over. 

My question to leave you with though would be: who 
keeps track of Google? I don't know 
the answer, but l suspect it's one 
Analytics account that could do 
with some bigger charts! 



II More clicks and 
more hits equates 
to good advertising 
fodder and the 
lifeblood that keeps 
the big G’ machine 
ticking over if 


Follow us on Twitter for all the news & conversation 3 @webdesignermag 
Visit our blog for opinion, freebies & more www.webdesignermag.co.uk 


’Millward is obviously thinking of all those extra Tor once, the WD team is sn agreement, but is 



Excitographic 

Plotting the features that got. us 
in a frenzy over the month... 

A Steve Jenkins, Features Editor 
A Mark Billed, Editor 
^1 Steven Mum by. Designer 
A Adam Mill ward. Senior Sub Editor 


Turn over to the contents to 
discover what’s going to get you 
excited this issue... 
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This issue’s panel of experts 


Welcome to that 
bit of the mag 
where we learn 
more about the 
featured writers 
and contributors., 


ill* If you’ve been 
keen to get busy with 
metrics and boost 
traffic then this is 
the place! *» 



With a background in IT and engineering, Simon is a highly respected 
technology journalist, This issue he L s here to explain the intricacies cf cur 
featured cover topic - the extremely powerful services of Google Analytics 
and how they can benefit webmasters worldwide. If you've been keen to 
get busy with metrics and boost traffic then this is the place! Page 3& 



Mark S huff lebottom 


MarK Is an Adobe EtJutadon 
Leader and programme 
co-ordinator of 0A (Hems) 
interactive Media 
Production at Bournemouth 
University. The issue Mark 
revisits AiJobe Edge and Has 
a closer look at its new 
scripting features Page 58 
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Pete Simmons 



Pete Has been working in 
the games Industry for the 
last nine years, mainly on 
digital marketing. He'S here 
again this month to take a 
first-look at Media's new 
BrowserlD authertlcatlcfi 
method, plus show you how 
to implement It Page 54 


Eric Freeman 


t 


Alongside Elisabeth ftobsem. 
i Eric it co author of the 
I books Head FtiSt HTML & 
f CSS and Head First HTML5 
Pi'ogi'BfTwmng. A computer 
scientist and former CTO of 
Disney mm, lie's hare to 
conclude our recent J5QN 
two-part tutorial. PageSfl 



Robin deJongh 


2 


Robm is the author of 
Googte SketchUp for Game 
Design and SfnetchUp 7.7 for 
Architectural Visuafizatton. In 
part two of bra 3D WebGL for 
beginners guide he shows 
you how to light, animate 
and publish your 3D logo to 
the web. Page 66 


Sam Hampton-Smith 


m 


keen supporter of wet? 

standards. Sam love* getting 
the most out of HTML and 
CSS. When not writing for 
Web Designer, he runs a 
graphic design agency in 
Scotland and you can follow 
his antes on Twitter via bhe 
username ©samhs. 


Jeffrey Way 
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Jeffrey is a develops und 
evangelist who works for 
Envato. Aside from 
managing web-desgn blog 
Nettyls+, he enjoys playing 
with cutting -edge web 
technologies making him 
an ideal guest to talk about 
code optimisation. PagefiQ 



James Koster 



WooThemes' 25-year-old 
designer James Koster 
Joins us the month to 
demonstrate the process of 
opening an online Store by 
leveraging open -source 
blogger Word Press and the 
powerful WboCommerce 
pmg-in. Eagesz 


Matt Gifford 


Matt is a lead RIA consultant 
devdeoer who specialises 
in ColdFusion, Flash and air 
development With over ten 
years' industry experience 
across various sectors, he is 
a regular presenter a: 
national and Utematlonal 
conferences. E 
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Cutting-edge features, techniques and inspiration for web creatives 


Chat with the team and other readers and discuss the latest tech, trends and techniques. Here's how to stay in touch... 

O webdeslgner@imagine-publishing.co.uk O ©WebDesignerMag © www.webdesignermag.co.uk 


Insider. 

22 Lightbox 

Three sites trailing a blaze across the internet 

30 Design diary: Art4web 

The Slovakian agency describes its site revamp 

32 Profile: Shout Digital 

Uncover a UK studio well worth shouting about 

38 Cover: Google Analytics 

Made to measure? We go inside Google's vital 
metrics tools and explain why they matter 

48 Blog beautifu l 

Six great examples of responsive design blogs 

76 Design cloud 

Going mobile with a pick of small-screen sites 

94 Portfolio 

Forrest Tanaka and Amit Das are showcased 

96 Trend map: Glasgow 

Scotland's business city reveals its creative side 

98 Talen t directory 

Charting the great and good in the web trade 

102 Hosting listings 

Affordable packages for serving your domain 

114 Style relic: Sainsburv’s 

Supermarket dotcom design from 1998-1999 


Discussing the hottesttopics 
from the web-design world 


8 The quest for 'social search’ 

Tapping into the collective web consciousness 

io FirefoxideyeloperJQols 

An overview of the new In-browser capabilities 

12 C r ow dsource 

All of your burning questions answered by us! 

16 Comment: Alan Tam 

Monotype man calls for web font consistency 

18 Comment: lan Leighfield 

The outlook for data storage is looking cloudy 

20 Webkit 

A raft of great products, books, apps and more 



Design diary: Art4web Design cloud 

The secrets behind this studio's new portfolio site A beautiful selection of mobile marvels 



Developer tools examined in our news roundup We hear this agency's M n loud and clear,.. 
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On llie free Cl) 

112 Discover what your latest disc has to offer 

Designer resources including 
some essential HTML5 readi" ° 

* 82 sumi stroke Photoshop brushes 

* 80+ minutes of video tutorials 

* 70 pearl social media icons 

* City Facebook Fan Page worth $15 


Personal 

tHA*GC tour details 


Feedback 

VIEW YOUR COMMENTS * 


Alerts 

50 rtRSOMirst tour alerts 

Animated navigation 
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New scripting features from Adobe's IDE 


Web workshop SKHSffik. 
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88 

Word on the tweet 

Implement a Twitter feed with JSON 


72 Appl y a modern take 
on retro styles with 
www.thislstommy.conn 

Adam Smith offers tips and 
inspiration for those aiming to 
deliver a contemporary edge 
to vintage visual styles 


70 


Building headers with 

colourful animated text 

Mark Shufflebottom deconstructs utm 
mi mlc the s He’s dy n a m ic heade r 


Create stylish co n te n t 

on a single page like 
ascensionla t orrecorn 

It s all fixed headers and list 
tag techniques with this 
breakdown of a website 
layout that oozes elegance 


©Commerce sites with WooCommerce 


<tutorials> 

Web gurus take you step-by-step 
through professional techniques 


50 

Cuttina-edae naviaation effects 

54 

with CSS3 alone 

Sam Hampton-Smith on building impressive page menus 

Intea rate Mozilla’s new BrowserlD 

58 

into your website 

Authentication updated with this first-look walkthrough 

Produce interactive animations 

62 

with Adobe Edge 

Discover jQuery support and the new scripting features 

ODen a feature-rich eShoD usina 

66 

WordPress & WooCommerce 

Find out how trading online Just got a whole lot simpler 

Make the move from Gooale 


SketchUp to WebGL 

Robin de Jongh is back to guide you through the process 
of placing your 3D animated logo Into your website 


r ,uieb_ 

{developer; 

NEW! Dedicated 12-page section offering 
features and tutorials for coders 



Feature 

Push for peak performance 

Expert developer Jeffrey Way on why optimising 
your listings is vital, with suggested tips and tools 

84 Develop a secure login with 
Ruby on Rails 

Add smart authentication controllers in order to 
protect your restricted pages 

88 An introduction to JSON: part 2 

In the second part of our JavaScript Object 
Notation guide we install a Twitter feed directly 
into our webpage 
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Discussing the hottest topics in the web-design world 

If you have a creative project, new web product or great designer story, contact the editorial desk 

O webdesigner@imagine-publishing.co.uk 0@WebDesignerMag 


G oogle+ 

Social search +1 

Will Google’s flagrant preferential treatment of Google+ in its search 
results alienate users or bring on board more brands and businesses? 


G oogle is the number one 

search engine in the world, 
available in a multitude of 
countries and a host of languages, t 

anyone has anything to promote online 
then it is the obvious starting point. 
However Coogle is perfectly aware of 
how far reaching Coogle Search is, with 
the engine able to boast over BO per 
cent of all searches made. Translate this 
into numbers and it means there are 
billions of users across the globe using 
its product - a scenario that is not so 
applicable to its social venture Google*. 
So what better way to promote an ailing 
service than vta the world's favourite 
search engine? No need to get the 
Google green light, it's ohe of ours. 

The very premise of Search plus Vour 
World, as the integration e known, has 
been seen as nepotism by many, though 
obviously not by Google, and it hasn't 
been well received In its first few months 
of operation. In fact, according to a poll 
on Mashabie around 63 per cent of 
voters didn't want social search results. 


Admittedly, on the surface. Google 
Search is still much the same search 
engine it's always been with just a few 
added extras. But this simple analogy 
instantly reveals that, while users are still 
getting the results they want they are 
also getting results which are heavily 
weighted towards Google*. 

J\ ie lack of Twitter involvement Is 
something that can't be ignored. If users 
are getting results that do not include 
those from the world's most popular 
microblogging service, surely the results 
are something of a lame duck? Twitter is 
still active in the search market giving 
over its tweet stack to Google’s rival 
Bing, Will this see a significant shift 
towards Bing? It's highly unlikely that 
Google has to worry about users 
defecting in their millions, but if this 
controversial issue begins to give 
advertisers pause for thought, then it 
could become a more major concern, 

To emphasise the contention the US 
Federal Trade Commission is reportedly 
including Google* in its antitrust probe 


of the search giant. However, no 
comment has been made by either side. 

The flipside is that Google Search is 
still the dominant force, and for the Lime 
being this means Google* will be the 
dominant social force. So perhaps now 
could be the time to stop doubting the 
network and embrace it getting ahead 
while the rest of the world dithers. So 
how does a company go about jumping 
aboard the Googie+ platform? 

The first step is to create a Google* 
Brand page and make it relevant to the 
search terms people will be entering. 
With a page In place the next step is to 
create a content strategy, Aim to offer 
high-quality, engaging content on a dally 
basis and ensure it contains relevant 


search terms and themes desirable to 
the target audience. Finally, check out 
competitors and take note of any 
successful strategies. For more help on 
getting started with Google*, visit 
hti p://s u p porLfl fr o g le.coin/p I us 
There's no doubt that social search is 
an inevitable step for the world of web 
searching In general. However, with 
Google shamelessly promoting its own 
product, will users finally &ay they have 
had enough? In Web Designer's 
opinion, probably not. The competition 
- read: Bing. MSN and Yahoo! - still falls 
far short of public demand. While users 
may not like Google's self-promotion, 
most will learn to live with it - that is. if 
they even noticed it in the first place. 


...perhaps now could be 
the time to stop doubting the 
network and embrace it 
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Find news and feature items at@ www.webdesjgnermag.co.uk news 


Whatever happened 
to Google Realtime? 


F or those who can't remember Google 

Reaftime it was a feature of Google Search 
tha l offered information from sources 
including Twitter, Facebook and selected blogs. 

It was introduced at the tail-end of 2009 and 
included a timeline and content under the Realtime 
banner. However, as soon as it started to become 
popular it disappeared as quickly as it had emerged. 
The reason for Realtime's vanishing act is not as 
Intriguing as you might expect, According to 
Google, it had an agreement with Twitter to include 


its updates which simply expired on 2 July 2011. 
Twitter effectively said the same, but pointed out 
that it was working with other content providers, 

The issue that arose, and still has not been resolved 
entirely, is why do away with Realtime immediately 
when plenty d other sources were providing 
content - including the social-networking giant 
Facebook? Google denied it had anything to do 
with its own venture Into social networking. Google+, 
which made an appearance only months later, but 
to us that seems difficult to believe. 


Google* male-female ratio Top Google* people 

(as of 14/2/2012) 

Britney Spears 
Snoop Dogg 
Larry Page 
Tyra Banks 
Richard Branson 

Conclusion 

Apparently, statistics don't lie but simply 
allow us to make our own assertions. Taking 
a look at the most popular people on 
Google+ suggests a very US-centric 
audience - after all. when was the last time 
Britney Spears and Tyra Banks were 
popular outside the States? 


Bing gets Social 

Google and Twitter may no longer be search buddies, but Microsoft Bing continues to be friencte with 
Twitter n much the same way that Google used to be. The Bing search engine currently has its own 
social feature In beta and. If you want an alternative to Google and Google*, this is probably It. If you want 
a Twitter Realtime- 1 - and, let's be honest this network is far more representative of what's happening in 
the world - then now might be the time to go Bing. Head to www.bing .com. dicx Explore select Social 
and add a search term to get the real-time results that were once the domain of Google. 


70 % 

Male 



Female 

Source: 

h 11 r v /.'cv, CH feta tE tlCS rnrri 



COMMENT 


Andreas Pour os 

COO at Greenlight 
vifww.greeiilightdigttal.cCTii 


eg 1 Social search is simply a search just 
wW like one that you might make in 
Google, Bing or any other search engine - but 

one mat returns listings from vour social 

networkfcalled _v_qu r;s_o£ialHiaDhIalQng 

with vour other results. 

"This year Google became the first search 

engine to make social search a reality by 

incorporating content that you/vour 
connections might have created/shared via 

Goofile+ in to i Ls s tanda rd search r esul Ls. 

"This is impor tan L for a number of reasons. 

For businesses it means that vou will need to 

in ve st in increasing vour exposure in 

Google+ and other social networks as this 

will now have a direct impact on vour site's 

online exposure and rankings in search 

result pages and increasingly so. In 
addition, vour business website needs to be 

designed and constructed in a wav that 

allows and invites people to +1 and share 

pa ges and content, thus increasing the 
perceived value of the domain, page and/or 

content to the search engines, which again 

will result in preferential rankings. 

"For consumers, social search should 
make vour results more help!ul than they 

have ever been bv serving up results that are 

not only representative of the best of the 

web, but also results that consider the 

preferences, experiences and 
recommendations of vour friends, family 

and other connections, and indeed through 

a better understanding of what vou as <B| ^ 
an individual like and value most. 


<news clouds fodemizr HTML5 games 

■dvpHI rnupraop thp mraitli’c tTpnriinp tnnirc i ^ 


Bite-sized coverage of the month’s trending topics 

New version supercharges Modemizr 

Modemizr, the open-source JavaScript library that helps 1 

make HTML5 and CSS3 sites work as intended In any 
browser, has just released version 2.5 The update includes 
a host of new features and tools including a robust and 
integrated test suite which can be found at fttt p-.ff 
mcdemizr.github.CQm/MQdernizr/test/index.hitml logel 
the latest iterator! head to www.mnrlfirnlw.mm now 



3 (previously expected lobe 7 March] delayed 

WordPress 

Androidapp nowincludes an all-new FI r« 


Phone is unveiled 




Dashboard UI and powerful new editor 


l refox lor Windows and safari lor Mac 
get best HTMLS accessibility scores 


play Mobi released 

recently announced the beta of 
playMobLa cross-platform game 
development, deployment and 
monetisation SDK. The new kit 
gives HTML5 game developers a 
JavaScript API solution to many 
of the Issues they regularly face, 
including user authentication, 
social player engagement and 
In-game payments. 
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Discussing the hottest topics in the web-design world 
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Develop with Firefox 


The Mozilla browser unleashes a new range of powerful developer tools 
and sought-after fixes in version 11. Here we take a closer look at what 
designers and developers can sink their teeth into... 



N o one can argue Firefox isn't a 
dominant force in the browser 
market. Silting comfortably 
alongside Internet Ext*orer and Chrome, it 
is the browser of choice for many web 
designers and developers. 

Version 10 of Firefox boosted the already 
impressive selection of tult-in developer 
toots and version 11 is set to do the same. 
Currently in beta (expected for release on 13 
March) the latest iteration will add the Style 
Editor and Page Inspector 3D View. 

The more curious of the new additions is 
the Page Inspector 3D View. This is WebGL 
powered and, fix that very reason, a 
compatible computer/browser is essential 
for viewing. The 3D View, which was 
available previously as an add-on, presents 


a whole new perspective on the structure 
of a webpage. The feature takes the current 
page and stacks all the elements that reside 
inside the body tag and even lets the 
viewer see hidden elements. The whole 
structure of the page can be rotated and 
zoomed in on. while features can be 
selected to give the developer the exact 
name of the element In a breadcrumb-style 
menu at the bottom of the page. 

The 30 View is part of the Page 
Inspector (unction, working with the HTML 
view and Style Inspector Alternatively any 
element can be chosen from the 
aforementioned menu for closer analysis. 

The 30 View is found via the Toots menu 
residing under Inspect. Neatly tucked away 
in the corner is the 3D button; press this 


The updated Page inspector now offers a dynamic 3D perspective of page elements 



and the current page transforms into three 
dimensions. Scroll uptown to zoom in/out. 
dick and tfrag to rotate and Ctrl/right-dick 
and drag to pan. Alternatively, the keyboard 
can be called into action; use v andto 
zoom. the arrow keys to pan and the A/D 
and W/S keys to rotate. 


In the style stakes the previous released 
Style Inspector has been given something 
of a makeover. Version 11 of Firefox now lias 
the free-form Style Editor which provides a 
list of all the stylesheets related to the 
current page in one pop-up pane. Thb is 
the ideal environment for in-browser styling. 
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Users can simply pick a stylesheet and 
make tweaks, which are Instantly 
executed Any changes can be saved to 
the desktop making this not only a great 
tool for working on personalfclient sites 
but also any random website where you 
want to take a closer look at the code. 
Sitting inside the Style Editor is the option 
to create a new stylesheet, import a 
stylesbseL and use toe eye' icon to 
activate/deactivate an entire sheet 
Mozilla hasn't forgotten under the 
hood with 3 host of fixes built in to 
Firefox 11 New is toe option to migrate 
bookmarks, history arid cookies from 


Google Chrome sync add-ons across a 
series of computers and support for the 
CSS property text-size-adjust. There are a 
couple d HTML5 fixes too. For instance 
the outerHTML property is now 
supported and the view source syntax 
highlighting now uses the HTM15 parser. 

Alongside the Style Editor and Page 
Inspector there is 5PDY protocol support 
for faster page loads, which is testable. 
WebSoekets are unprefixed and files can 
now be stored in indexDB. 

To get the latest edition of Fi relux and 
test out all the brand-new tools pay a visit 
to www.mQzil la.orpfen US/firefox/beta 


Mozilla hasn’t forgotten 
under the hood with a host 
of fixes built in to Firefox 11 


Create top-class 
Android UIs 

The new Android Design manual is the 
go-to location to satisfy the needs of 
Android app designers and developers 


A ndroid 4,(X the latest version 
of the Google 05 known as 
Ice Cream Sandwich. Is 
touted as a 'major milestone for 
Android design 1 - The new principles 
installed in the Android tablet OS 
Honeycomb have now been appied 
across all mobile devices. 

The arrival of the Android Design site 
is set to give Android developers and 
designers - particularly newcomers to 
the OS - the perfect place to learn about 
the major elements needed to create 
stunning user interfaces. 

The online presence provides a 
wealth of information to ensure that 
users create great-looking apps. The 
guide is effectively broken into three 
sections Style, Patterns and BUIdlng 
Blocks. Style looks at some of the more 
obvious elements such as Device and 
Displays, Themes, Touch Feedback, 
Metrics and Grids. 

Typography, Color and 
Iconography. Each section 
gives guidelines afcxxrt 
designing for different 
screen sizes, how to 
communicate texture with 
visuals, ghcfe and sizes for Ul 
elements, typography 
scaling and toe option bo 
download colour swatches. 


Patterns is more technical, giving 
guidelines on new Android 4.0 features, 
how app structures work tips on 
navigation arid backwards compatibility 
with older versions of the Android OS. 

Building Blocks offers an insight into 
all toe ready to-use elements that can 
be implemented, sudn as tabs, seek 
bars and switchers with instructions on 
how to use them to best effect, 

To complete the picture there is a link 
to Android Developers' index page, for 
crucial links to resources, references, the 
Android SDK and a developer glide. 

Android Design in -general is a little 
fluffy, but does provide a nice all-round 
introduction to toe 05, It also offers all 
the right links to more in-depth 
documentation for those who want to 
start building right away For a gentle 
initiation to designing in Android go to 
http; //developer android com/design 
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Your emails, tweets, forum comments. The social network but in print 

This month we wax lyrical about the best software for mockups, how to modify WP themes and the top responsive design frameworks 



1$ III Listrator a better option than 
Photoshop for mockups? 


sublet Another WordPress convert 

From Lesley Snaders 




I have just Joined the WordPress revolution. IVe been 
using Tumblr and thought it was time to add a bit 
more oomph' to my musings. Your feature (issue 191) 
has ensured I have picked the right theme for my 
website. The only problem I have is that I want to 
modify the theme and get it exactly how I want it 
before I put it up on the web. First, how easy is it to 
modify a theme and, second, how can I preview the 
modified theme before making it live? 

Glad we could help, Lesley, Modifying is as easy or 
as difficult as you want to make it. If you know a little 
about coding tackle the stylesheet (typically style. 



css) of the theme to 
make adjustments. 

This is really simple 
if all you want to do 
is change fonts, 
background images, 
etc. A handy tool for 
viewing a theme locally 
on the desktop is XAMPP 
(www.aoachefriends.oro). This is 
available for Windows, Mac and Linux and is 
relatively easy to set up (instructions can be found) 
on the XAMPP site). Good luck with the tweaks! 


Web subject Mockups with 

Designer mustrator 

tutorials From john Tedesc ° 


Discover the latest 
techniques to help 
create inspirational 
and engaging 
webpages on our site 



Create interactive 
animations from a 
Twitter feed 


fotttt//bitlWxl4iNZ 



Manage backgrounds 
withCSS3 

http:# h ih tylyV U7X. ?_ 


Optimise WP & enhance 
site performance 

HtlpV/bit. ty/zqOOgv 


I've been reading Web Designer 
for only a few months, and have 
been running my own small 
web-design firm for a few years. 
Primarily my success comes 
from my ability to design 
attractive websites and build 
them using current web 
standards in custom code writing 
without the use of templates and 
open-source content 
management systems; I (we) 
specialise in custom content 
management systems (which I 
think would be helpful to talk 
about at a later date). 

I'm writing because IVe 
noticed the majority of web 
designers, or at least all those I 
know, design websites with 
Photoshop. I always designed 
with Illustrator - as a packaging 
and product designer, that's what 
I knew, but I also think Illustrator 
is a much more efficient way to 
organise the files and pieces of a 


website all within one document; 
elements are simple to enlarge 
and move around, plus you can 
create art boards and slices, etc. 
with ease. Photoshop, tome 
:r I'. Ike .he harder .e an-.: 
the 'inappropriate' way to create 
a 'style guide' of artwork for a 
website. I would love to talk more 
about my process and develop a 
how-to for your magazine 
explaining and illustrating the 
benefits of using a single 
Illustrator file for an entire 
website's artwork library. 

Photoshop has always been the 
preferred route for web 
designers when it comes to 
mockups simply because, in 
general, designers around the 
world are more likely to be 
using this program, The use of 
Illustrator, however, does sound 
like an Interesting proposition 
and one that Web Designer Is 
keen to explore further Keep 
an eye out for future issues in 
case we take John up on his 
offer and share his expertise! 


subject To be or not to 
be responsive? 

From Michael Gerrefl 

I have been reading a lot about 
responsive design and I am 
undecided whether it's a good 
thing or not. It looks to me that to 
create a well-worked responsive 
site there is a compromise in the 
Initial design process. 

Anyway, without making Loo 
many assertions on Lhe whole 
process I am going to take one of 
my current designs and make it 
responsive. Are there any good 
frameworks out there that will 
help with the transformation? 

There are a range of tools and 
frameworks currently assisting 
designers to achieve a one-size- 
fits-all approach, Michael, Web 
Designer would like to say that 
we have tested them all in great 
detail, but even we are not 
superhuman... Take a look at 
the following and we're sure 
you'll find one that fits the bill: 
Less Framework (http:// 
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Join the conversation as it happens on Twitter Q ©webdesignermag 
Comment on the news and opinion ® www.webdesignermag.co.uk 



lessframework.com);32G and 
Up fhttptfstuffandnonaensfc 
co. u k /projects/320a nd up): 

1140 CSS Grid f ht tp: //cssgrid. 
net): or Frameless fhttpV/ 
fra me lessor id.corn). Also be 
sure to check out our upcoming 
feature on responsive design 
scheduled for issue 195. 

s.,bj K <t Measuring 
my success 

Front Carey de VaJk 


I think my website is great, but I'm 
unsure what others think or how I 
can get more visitors. I have been 
checking my Google Analytics 
and I seem to be getting around 
500 visitors a month and I have a 
'bounce rate' of around 65 per 
cent. I'm not sure what most of 
the figures mean though, Is this 
good? How can I get more 
visitors to my site? 

There isn't enough space here 
to go into great detail about the 
specifics of design that will 
improve your visitor stats. In 
answer to the question. Is 500 
hits good, it’s not bad for a small 
niche site. As to how can you 
get more visitors, the simple 
answer is: sell yourself. Get on 


Twitter and start following 
like-minded people and make 
sure your website Is updated 
regularly with content that's 
informative and interesting. 

subject plash file 

indexing query 

From Stephen Smith 


I built a Flash-based website 
some years ago for a client. This 
was built using levels - loading 
and unloading SWFs depending 
on which page you visited, Now 
that Google can index Flash files 
when the site Is displayed In the 
organic listings within Google it 
separates the pages out under 
the main homepage link. But 
when a user clicks on these links 
they view the single SWF without 
all the other levels that make up 
the page. Is there a solution or a 
workaround to this problem? 


Comments from the Blog 

• Web Designer is always keen to 
hear from its dedicated readers, 
followers and visitors. Here we 
bring together a specially selected 
collection from the last month... 

Rob at King’s Lynn Website Design (in reference to 
the 'Optimise Word Press and enhance site performance' 
tutorial) said: 

Thanks for this article, got my page load down from 3.5s to 1.0s 
within about ten minutes of reading this! Will be implementing 
the same changes across all of my client sites now. 



Scott Birnie Maria 


Result not only is latest @ Cannot live without 
WebDesignerMag out but my @WebDesignerMag 
fav #html5 guru @robhawkes ... my favourite web 
features heavily in it. Just industry publication 
need to try it out one day! on the planet! 


Adobe Flash is a platform 
that is slowly disappearing 
from many web designers’ 
skillsets, but we re sure that 
someone reading this will 
have the answer. If you know 
how to resolve this issue let 

i mag ine-p ub Itshing .co.uk 



ANDROID MAGAZINE 

There are over TOO million Android-powered 
phones and tablets in the world and currently 
over 300,000 apps. Android Magazine is the 
only title dedicated solely to this platform, 
offering a host of step-by-step tutorials and 
features on how to use. hack and improve any 
Android device: www. littleg ree n robot.co. u k . 
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1&1 has been in the UK for 
more than 10 years and has over 
1 million UK customer contracts. 
With more than 6.4 million 
contracts worldwide, 1&1 is 
a leading web host. 


tour BUSINESS 

AWARDS 2011 


Geo-redundant 1&1 data 
centres offer security, 
speed and peace of mind 
for your website 

Maximum availability 



















1 WEB HOST 

MISSABLF OFFERS 



operating simultaneously 



1&1 DOMAINS 

.co.uk, .co & more 


1&1 PROFESSIONAL 
eSHOP 



starling at 

49 £ 0"®P 

flrit year 

6 months FREE, 
tlien per mondi 

All 1&1 special offers can be found 
on our website* 


www.1and1.co.uk 


Call 0844 335 1211 or buy online 













Flash Platform for both 
mobile and consumer 
electronic devices. 


Alan Tam 


If typographic continuity is crucial* are you on the same page? 


T he proliferation of websites or to smartphones and 
tablets presents a huge opportunity for organisations to 
position their brands across differing web and mobile 
platforms. Your brand defines who you are and, just as important 
helps you stand out from your competitors. With fonts being both 
the essence and genesis of branding and identity, the typography 
your branding sends out has a direct effect on a consumer's 
perception of your company your products and whether you seem 
trustworthy or not. A key difference in the digital medium is that the 
presentation and consistency of a brand is of even greater 
importance towards initiating a relationship with a customer since 
first contact to purchase can be only a single click away. 

Web fonts were originally launched in 2009 to enable web 
designers, content creators and brand holders to access and extend 
their brand in the digital medium for their internet communications 
that include branded sites, blogs, web content, campaigns and 
advertising, as well as personal sites. 

Now we're in 2012, web fonts are starting to go mainstream. I 
recently reported the good news that Monotype Imaging and 
Google's Web Fonts team have been working closely together to 
improve the current use of web fonts. The main focus has been on 
file size. The idea is simple; smaller web fonts are faster web fonts. 
Faster is better. Through this partnership we have now successfully 
achieved the goal of making the process quicker, the image sharper 
and keeping the same consistency of quality and performance 
across different browser platforms by using Monotype Imaging's 
MicroType Express (MTX) algorithm. It's hugely encouraging to see 
a company with Googled reputation throwing its weight behind web 
fonts, but how is it being deployed in the real world? 

Some of the largest online retailers are now getting to grips with 
web fonts and really starting to use them to their advantage, For 
example, Le coq sportif, one of the world's most well-known fashion 
names, renowned for its clothing, footwear and sporting equipment 
recently completed a major overhaul of its website and web fonts 


played a key role in improving its digital experience. As an 
internationally recognised brand, which trades in multiple 
geographies, the revamped website had to cater for eCommerce 
usage and be merged into one website with versions for different 
countries. Le coq sportif has developed and maintained brand 
loyalty over many years and has had great success in creating an 
identity that the consumer both likes and respects - something 
which would be extremely detrimental to compromise when 
updating the site. It was imperative for brand behaviour to remain 
constant across all of its international platforms, 

Le coq sportif had been using the Univers typeface, which was 
set in the company’s branding guidelines and used extensively 
throughout the history of the brand. However. Univers was not a 
web-standard font and therefore not transferable across digital 
devices - posing a huge risk in that all brand loyalty could be lost 
Thankfully, we are now at the stage where a web font version of 
Univers was able to be sourced efficiently. Le coq sportif was able to 
quickly identify and provide the correct typeface, which was 
specially created for use on digital devices. 

I touched briefly on consistency earlier and how important it is for 
brands to keep the uniformity across different media and devices. If 
the uniformity from print to mobile isn't there, then your brand is in 
serious trouble. Building brand loyalty can take years and great 
investment, yet we still see some companies ieopardising their 
reputations by not adapting their brands to be transferable. We 
even carried out research on mobile branding, which revealed that 
less than one per cent would definitely trust the credibility of a brand 
if the font in the text was different to what they were used to seeing. 
With widespread spam issues arid data breaches becoming more 
common, keeping your brand consistent has never been more vital. 

If your brand is not consistently extended across these platforms, 
then the ability to reach and connect with vast audiences via new 
digital media will be greatly reduced. The good news though is that 
as digital media continues to grow and diversify, so will web fonts. 


Some of the largest online retailers are now getting to grips with 
web fonts and really starting to use them to their advantage 
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Pay As You Go 
Advertising 

Advertise on Google. 

Pay only when people click on your ad. 


For most types of advertising, you pay for people to see your ad. With Google AdWords advertising you 
only pay when they dick to visit your website. So you get exactly what you pay for - more customers. 
And because this Is pay-as-you-go advertising, you have complete control 



Control how much you spend 

You can set a daily spending limit and an amount you're happy to pay for people to click 
on you r ad. The price is chosen by you, not us P so you never have to worry about going 
over your budget. 



Control who sees your ad 

Your ad will only appear when potential customers are searching online for relevant 
terms youVe chosen to describe your business. 



Control where and when they see it 

You can choose to target your audience by location and time: attract local customers 
during your opening hours or, if you'd rather, promote yourself to a global audience 
round the dock. 


Voucher missing? 


Don't worry, someone in your company 
have beaten you to it. Track them down and 
make sure they're claiming 




£50.00* advertising credit 

with Google AdWords for your business. 


No minimum term or commitment. 

Offer 1 only available to businesses m the UK. 


Don't miss out - try it today 

We're offering £50.00* of Google AdWords 
advertising for business users**. There's no 
obligation to continue - you're in control. 

To start attracting new customers today: 


Visit goo glexo.uk/ads/start 


Or call 0800 169 0478* * 



***Call5 to 0800 numbers are free from BT landlines but charges may apply if you use another phone company, call from your mobile phone 
or call from abroad. 

**Terms and conditions apply. Promotional credit can only he used for AdWords accounts ihal are I ess than 14 days old hy advertisers with 
a billing arid resit in ihe UK, Advertisers will be charged for advertising Ihal exceeds Ihe promolional crEdil. Advertisers will need In suspend 
their ads if they dn not wish to receive additional charges beyond the free credit amount, offer subject toad approval, valid registration and 
acceptance of the Google AdWords Programme standard terms and conditions. The promotional credit is non-transferable and may not be 
sold or bartered. In some cases* adve rtise rs who choose prepay billing may be subject to a £10 minimum prepayment before their account Is 
activated. Any such prepay amount wii be credited to Advertiser's account once account Is activated. One promotional credit per customer. 
For full terms and conditions please v^it http /rwww gonglf ffmkj'jdvjnrH-h.voi irherterm^ Gnngie Ireland Limited, a company Incorporated 
under the laws of Ireland* with company registration number 368047 and registered office address at Gordon House, Barrow Street Dublin 4, 
Ireland. Copyright 2012. Google and Google AdWords are trademarks of Google Inc. and are registered in the US and other countries. 
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This cloud 
won’t shift 


lan is the head of Business 
Development at ZlpCIoud, which is 
part of the UK-based cloud-storage 
solutions company JDI Backup. 
In his spare time he enjoys 
blogging about everything 
cloiid'. golf and watching 
loved Swindon 
Town FC play. 


tan 


his beloved Swindon Leighfield 


Today’s outlook and forecast is a perfect storm for your data 


T he cloud' or cloud computing’ have been buzzwords 
within many industries for a few years now. At first a simple 
idea, it has now evolved to become an important part of any 
web designer and web user's life, and to those It hasn't. It shortly will 
do. In fact, cloud storage is quickly becoming the fastest-growing 
web industry in the world. Its convenience its execution and the 
near-unlimited ways of storing and syncing data has led to a 
worldwide boom- it really is time to get your head in the doud. 

The sheer thought of losing all your priceless images, those 
hundreds of hours of work and presentations from back in your 
college days can bring people to their knees with terror. 

Like a tot of you. a few years ago I was new to the idea of cloud 
computing and incredibly sceptical of its benefits. With the current 
market so saturated with Choices, you find yourself questioning not 
only who you can trust, but also 
what kind of benefit a plan will be. 

Why is it only now that the cloud 
is quickly becoming the best option 
for web users and designers across 
the globe? To those not quite yet 
versed in its advantages, let me give 
you a quick overview. 

Many moons ago it was standard 
practice for individuate and companies to do multiple copies of work 
on multiple platforms - CDs, tapes, USB sticks, external hard drives, 
etc. However, this became clunky and difficult to manage, as well as 
running the terrible risk of putting all your eggs In one basket should 
a house fire, burglary or similar mishap befall you. 

Oddly enough though, this scenario presents itself as toe greatest 
stumbling block for cloud storage and computing as an industry, 
How do you convert users who have never experienced the 
devastation data loss brings, and that may simply be happy and 
assured with how they currently protect their files? 

The cloud has many tricks up its sleeve to try and convince you. 
With the many leaps forward in technology that we have seen in the 
industry, it's hard to keep up to date with what features are not only 
useful but also relevant to toe end-user. The ability to access files 
whenever and wherever you are from any device is a must for 


anyone searching for cloud storage, but it may surprise you to hear 
that some companies do not yet offer such a feature. The opbon to 
be completely in control of your files, all in one place that is secure 
enough to store all your work, and allowing It to be accessed at any 
time from any device Is. to me. a priceless benefit. 

Some options out there will also allow you to back up your data 
while you sleep, or while you are busy working on your next project. 
This allows for risk and carefree backup, taking place in the 
background, without eating into your work time. 

A bidding war in the market has led to cost becoming an essential 
factor for every competitive company. Some In the market now try 
to offer large storage plans, coupled with the peace of mind that 
comes with storing files offsite for less than 20 pence per day. There 
are very few people who could argue that cloud backup and storage 
isn’t an affordable option and 
excellent value for money. 

T he capa city to sha re files securely 
between other users is a remarkably 
useful tool, especially when you r re 
looking to send documents or 
photos between profiles or users. 
Whether it’s private or public sharing, 
toe possibilities here are endless. 

For designers and web users alike, the ability to access, save and 
upload files across multiple platforms is, in the vast majority of cases, 
of utmost importance. So it's worth taking Into consideration that, 
even now, some cloud-storage services do not back up Mac 
operating systems, although a few services do offer toe ability to 
access your files online when using a Mac product. 

Right now the world needs educating that cloud storage is the 
way forward, A lot of the industry's biggest players are attempting to 
do this with special offers and promotions. Many cloud-based 
companies - Including ZipCIoud [ www.zipdoud.coml - are offering 
free trials on many of their products, as well as some very competitive 
discounts. Cloud storage Is not a phase - It's toe future. 

Inevitably, cloud storage will become toe everyday way to back 
up all that is important, and the last thing you want anyone saying to 
you after losing all those precious files is, 'I told you so." 


For designers, the ability to 
access, save and upload files 
across multiple platforms is 
of utmost importance 
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SCALABLE BY THE HOUR 


to the ne; 
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Demands that change by the hour? 

1&1 has a server to match! 

■ NEW: Pay-per-configuration by the hour. Increase or decrease 
capacity as needed with precise billing to the nearest hour 

■ NEW: Add virtual machines as you need 
them by the hour 

■ NEW: Server monitoring and management 
via web browser or mobile app 

■ NEW: Up to 6 CPU, up to 24 GB RAM 
and up to 800 GB of hard disk space 

■ Dedicated server environment with full root access 

■ Linux or Windows operating system 
with pre-installed Parallels* Pfesk Panel 10.4 

■ Includes 1 SSL Certificate for secure transactions 

■ Hosted m secure, high-performance 1&1 data centres 

■ 24/7 phone and e-mail support 

• ^ 
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1&1 DYNAMIC CLOUD SERVER 

3 MONTHS 



Then starting at £29.99 per month 



Cal! 0844 335 1211 or buy online 




www.1and1.co.uk 


4 Sasic con figuration free for 3 months. Higher configu ral to ware priced at the difference between the base con figuration and the desired configuration. 12 month minimum contract term applies. 
Visit www.landl.co.ifk for full promotional offer details, terms and conditions. Prices exdude VAT. 
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Spyder4Elite 

£175/$250 

www.datacolor.eu 

0\ The Spyder is a display 

colour calibrator designed 
to ensure the colours on screen 
match up to those that come out 
In print The unit features a 
patented, full-spectrum 
seven-colour sensor to sync your 
monitor, laptop computer, iPad, 
iPhone and projector. 


Supercharged 
JavaScript Graphics 

£31/$40 

http://oreillv.com 

Q lf you want to produce 
high-performance web 
graphics then this book Is a great 
starting point. Tackle JavaScript 
optimisation and understand how it 
impacts performance and also 
learn a host of adva need UI 
techniques with jQuery 


HTML5 Cookbook 

£27/$35 


Q This book, aimed at 

intermediate users, boasts a 
collection of'practical recipes’ that 
wi II give readers h a nds-on 
experience of HTML5. Each recipe 
includes sample code and a detailed 
discussion on how a feature works. 


Digital Art Techniques for 
Illustrators and Artists 

£20/$ 30 


Q A comprehensive guide to creating digital 
artwork with Photoshop and Illustrator. The 
book shows how to use the software as a tool 
rather than letting it take over the creative process. 


Vlingo 

Free 

Jnttps://market, 
android com 

Whatever lOScan do so 
can Android. Vlingo offers 
Ski-like functionality on 
a n And raid device. Simply 
speak and Vlingo will 
obey. Send texts and 
emails, voice dial, search 
the web. get directions and 
open other apps with ease. 








<weblcit> 

Furnish your studio with the latest gear, gadgets and gizmos 


JavaScript & jQuery: The 
Missing Manual 

E31/S4Q 


Q This Missing Manual is a 
jargon-free guide that 
demonstrates the basics of JavaScript 
and the jQuery library. Discover how to 
make webpages interactive, get the 
most from animations and effects, and 
collect data from web forms 




Karotz 

£115/$130 


Q Billed as the world's first 

intelligent internet companion, 
the Karotz is nicknamed Your Smart 
Ra b h it'. So, wh at d oes t h i s deve r 
bunny actually do? Well, it’s 
connected to the internet and 
broadcasts content such as news, 
music, texts, alerts and radio. 


Mario Bros stickers 

£60 


Q For all you retro gamers out 
there, check out this set of 36 
fully licensed stickers which are perfect 
for re-creating a favourite scene from 
the origin a 1 Super Mario Bros g a me. All 
stickers are movable and reusable, 
making them ideal for creative pods or 
offices craving a rapid retro makeover. 
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A sketching device that every designer/illustrator 
W should consider adding to their toolset. Draw straight 
onto paper and capture digitally,create separate layers and 
transfer to your favourite image-editing suite to play. 


Web services Save costs by outsourcing your admin to these great online services 


CSS 3.0 Maker 

From r ree 


«■>» v-wrftkwishw HTML5 Visual Cheat Sheet 

From FREE 


A nifty online service that helps create all the code 
needed for some of the best CSS3 selectors. 


A cheat sheet created by Woork Up that incorporates 
g a 1 1 the esse nti al HTM L51 a g s a nd re I ated elem e nts, 
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Alex Pierce 


http://thegeekdesigner.com 

Development technologies HTML5 Boilerplate, CSSS, JQuery, TypeKlt Nivo Slider, Zurb's Reveal modal 



Designer Alex Pierce 

http://theaeekdesiQner.com 

A bold portfolio site from a versatile designer 
who understands the art of online typography 


ow in its sixth incarnation, 
the portfolio site of Alex 
I;:;;; Pierce uses a limited 

****** colour palette to great 

»••••** effect. When viewed 

in the recommended 
Safari or Chrome, the 
constrained parameters 
of the si te allow Pierce to 
have complete control 
over the placement of 
his well-chosen graphics and 
typography. Bold without being brash, 
this site offers both practical and 
inspiring access to the designer’s work. 

Pierce describes his concept: "The 
overall theme 1 was going for was 
'desperate prom-date/bok^tme-look- 
at-me’, I wanted to grab your eyeballs 


with big typography, bright splashes of 
colour and give my nerdy personality a 
chance to shine * 

The smooth page transitions rely 
heavily on CS53 percentage/keyframe 
animation and markup with HTML5, 
The site also uses subtle changes in 
texture as each page loads; this is 
unobtrusive and delivers some 
eyecatching colour and type combos. 

With a propensity among some 
designers to develop over-busy web 
portfolios, this example is a refreshing 
change. The animated portions of the 
site are smooth and unobtrusive, but 
it's the typographical design that 
stands out. This web portfolio proves 
that less is more when it comes to 
showcasing your design talents online, 


§# The animated portions of the site are 
smooth and unobtrusive, but it’s the 
typographical design that stands out §# 



■ The bl II board-ll ke homepage shouts vol umes 
about the designer's love of type and Ills clear 
understanding of online typography 


abcABC 1234567890 

abcABC 1234567890 

cJUmve.tnptn bnttrnci* 

■ Futura Condensed PT from ParaType Is an 
evolution of the original font design by Paul 
Renner working Tor Bauer in 1927 

■ MuseoSlab from Jos Buivenga's ejdjbris Font 
Fo u nd ryr it is aval lable from MyFonts, FonlShop 
and Fontspring 
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Got it? Flaunt it! Tell us about your site O webdesigner@imagine-publishing 


LIGHltf^ 



SIGNER 

^DIRECTOR 



ee you there. My name is Alex and I'm a 25 
ler/art director/geek living in the Dallas/Fort 
ex. When not designing for and , I'm 
t it (along with the latest pop & nerd culture). 


DENTITY INTERACTIVE 

a. e 


io find TOuasrirrm turn wa wint 

ll, VOU'BI CCWIfil N(ED A IJIE (OMN. Of A HIGH 
•Ml COUNiaM. I CAN MAKE YOU A IWtf! 

EOIKOVGH- nA.THATU WOtt 0 


WHIN NO! IHONIHG OH ITU iMTTSMr OR EfflTIFlIMIKG MTST,! WITH 
UN-HIMT irYKUIQ PUTINC CATS, | OFTEN CDOTitllTf TO a THBOUGH 
mi DHJ&M ANIMATION, AJWITtllPW, AMO MY HOC fWHLN I'M HOT 
MUSH* FT W WTN TW UUCT COMIC IDW MW}. 0 






INTERACTIVE 




flesh uumMuni tm your guy 





Bold 
typography 

This site portfolio is all about typography. The 
welkhosen font pairings coupled with the 
limited tona l shades and textures come together 
to create a hig hly effective page design. 


#F9Bfl1C P3SJ4J1 


□ 


#F3 F3F3 AF2F2F2 


#352330 ABDSB14 



ALL ABOUT HE 


BRANDS I'VE WORKED WITH 

^ '. m !? 5 * 

. tfCtY A(^ 

THE BLOG 


FIELD TESTED. BATTLE APPROVED. 


* The control that HTML5 andTypeKit now give is exploited 
with eonsuim male ski ll on the bio page of Pierce's site 

- individual pieces of work are each given their awn page 
that provides their vital statistics 



<Lnftfr 

- Portfolio pages showcase each or 
Pierce's key skills and follow the site's 
overall design aesthetic 


llghlbGK 
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Know a site that deserves to grace these pages? Tweet us now Q @webdesignermag 


Create Digital Media 

http://createdm.com 

Development technologies Optimised for mobile devices, CSS keyframe animations, Photoshop 

responsive web-design techniques 



Designer Mike KUS 

http://mikekus.com 

A marketing site for app designers not only shows the 
skills on offer but also the company's personality 


he app company Create 
Digital Media wanted a 
new site that would 
showcase its technical 
ability, but also give 
prospective clients a feel 
for its design sensibilities. 

Mike Kus tells us: "As 
this is a very visual site 
and I was working with a 
developer I designed all 
the pages in Photoshop first before 
handing them over to Ryan Taylor [who 
I hired for the dev). I don't always do this 
but when you're working with a 
developer it's something you have to 
do. Once I had handed over the site 
design we would talk through each 



page. I'd answer any questions Ryan 
had and we also talked through the 
approach for the responsive design." 

The impression of the site on first 
viewing is that it is an evolution of what 
used to be called ‘Web 2.0'. Now several 
years later, the dean lines, sparse 
graphics and the unduttered approach 
are still clearly a driving factor here, 

For the company, ensuring that its 
site worked flawlessly on the mobile 
devices it designs apps for was clearly 
critical. Kus says: 'We have readied the 
point now where designing for the web 
fs also designing for mobile devices' 

As a frontrunner of a new breed of 
websites that support app developers, 
this is an excellent example. 


f 1 We have reached the point now 
where designing for the web is also 
designing for mobile devices ill 



<JUmve> 

■* Ttiis compa nv‘s blog is vital !y important to al low 
an inslgnt I nto what kl n d of designers they a re 



< Above* 

• Creativity with a robust technical foundation Is 
dear rrom the work page on the website. Art and 
■code meet In harmony 

abcABC 1234567890 

CftbOVO 

■ Museo Sans Rounded 0 n va r tons weights) from 
Jos Bulvenga's exljbris Fart Foundry. Available 
from MvFonts, FontShop and Fontspring 



flFGFiec SE4O-10S 3FBE6D0 



HOOA&DF *202020 *00AEEF 
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Make an 
impression 

The homepage of the site uses striking 
primary^Gtoured graphics. Animated with CSS 
keyframes,, the page loads instantly and runs 
smo-oth ly giving an irnrned iate impression of 
technical expertise. 


UGHI^I 


create* * 


Home ADout Work Boq Jobs Contact 


The art b science of app creation 

At Qetfe yrgitai Media we make beautiful app$ for iPhone Iftd and Androuf its a fine balance between art and science. 



Development 

With *om* of tfi* test tr.'JiiWi -n ifo* 
wCrld. wtQ 6nr*S r*or *Pt> to We 


Where we’re based 

Wt'nt bu«d jn It* bouldul (own of Tuntmtfp* 

Writ *• Kfitit. EngUmd whrit* w*retwsjyi jpps 

is# yiwirv} elemi wwVMrfflle 



What we do 

Wtduign buuUU tiirpte and flighty 
runeJaarul app*. tar iPhon* ifRad H ftraSmie* 
Chech cut ou# icten work 


iOS 


Our Passion 

w* Iqiw what ** dp! We tm puuoru* atx^it 
Ukmg you# irpfi taisM from meapttan and 
m*Knq ir#m 9 


w 




Step -Obi. CnritcL 



cFnim left t» right* 

■ Fancy a Job creating a per? Kus en su red that the 
jobs pagre dearly communicates what Create 
Digital Media is all about 

■ The people behind Create Digital Media are Trent 
and centre here. The unobtrusive layout Is both 
dean and Inviting 

* Thl 5 site of tiers severs I great examples of what 

can tie achieved with well-thought-out and 
executed CSS keyframe animations 


<Ahnv*r> 

* The use of a 
monochrome 
background palette 
makes the colour 
keyframe graphics all 
the more vibrant 


ligllltiOM 
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Know a site that deserves to grace these pages? Tweet us now Q @webdesignermag 


The Mark Rothko 
Experience 

www.experiencered.ca 

Development technologies Flash, full-motion video, Photoshop, webcam 



Designer Zulu Alpha Kilo 

www.zulualphakilo.com 

The online presence for the play Red offers viewers a 
unique window into the world of Mark Rothko 



• * m ■ m m 

* * t« m m 
m m * * 


• * * 


::::::::: he website to 

::::::::: accompany the 

tt *«•!• 

::: Canadian stage play Red 

is an in-your-face 
experience - quite 
literally, The developers 
of the site wanted to 
communicate the 
intensity of the play 
through the viewer's 
computer and opted to 
use Flash-based video coupled with the 
visitor's very own webcam, 

Outlining their approach the 

designers commented: The ultimate 
goal was to design an intimate and 
immersive environment reflective of 
the play's dark and intense tonality, We 
wanted a unique experience that 


places the viewer within arm's length of 
Rothko. So we designed the site to 
house full-screen video content in 
order to create a tense and almost 
claustrophobic interaction," The film 
production partner - Common Good - 
was key to delivering the immersive 
footage pivotal to the site's success. 

Rothko's own painting. Red was the 
inspiration for the dark colour palette 
that has been adopted. But it's the 
connection the site makes with the 
viewer that is truly innovative, drawing 
you in with scale and shifts in frame as 
it reacts to the viewer's position while 
you explore. Flash may be old hat. but 
this site amply illustrates there is still life 
in this animation format when in the 
hands of talented designers. 


iI f The ultimate goal was to design an 
immersive environment reflective of the 
play’s dark and intense tonality ill 



■ Tne luomepage of the site grabs your attention 
and doesn't let go as Rid unfolds 


ABCDEFGHIJKLMNOPQRSTUVWXYZ 
abcdefghijklmnopqrstuvwxyz 
1234567390 $ €£¥*?%&! 


< ve r top. to hottinm 

- The ma In title font Is Adelai da from frttp i tf 
youwo dtiortta e cucain. The handwritten font Is 
available in several weights 
■ Ultramar netlc also rrom hitp-i 1 / 
yoiiMforkforthern oiinjs used for the primary 
copy as well as the header and footer text 
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<Left, cluck wise, from bottom laft> 

■ The subtle opening credits or the site 
mask the intense experience that the 
viewer is about to encounter 
* The one-page sera liable CV realty 
brings Rothko's work to life thanks to its 
original styling 

- Lea r n more a boot the artist and the 
play before switching on yaur 
m icrop hone and webcam 



KOOOOOO 4696E10 *2AGE0E 



SB24G30 I403DO3 *K2A23 
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Everything you need 
to work better online 
from Fasthosts 

That’s not just a web-hosting package, a domain 
name, a virtual or dedicated server, broadband, 
hosted email or online backup. It’s technology 

based in the UK. 

You don’t want to keep your customers waiting. 
And by choosing technology that’s based in the 
UK, your customers in the UK will find websites 
load faster. Plus, with 24/7 support via the phone 
and online we’re here whenever you need us. 

There are many reasons why a UK data centre is a 
good idea, but, surely, that’s the most important. 

Find out how your business can work better online 
call free on 0800 6520444 
or visit www.fasthostsxo.uk 

You’ll find some great offers there too. 


hosting | domains | dedicated and virtual 




servers | reseller hosting | online backup 

C HU 1 ? AH Hfltrs iCTicr^ni hiMhpuU nrd Ctv tjgrj nm rrxlcmib of Fjetfhasti; Tlnrarl Lfct 

hjJrna tCarilEfcri. us^ «faytefDJi±:ti»h 
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| www.art4web.sk 


Design diar 

Ride th^jjevekopment cycle ——— 


project i wwwarl 4 wob.sk 

Company I Art4web 

Web l www.ail4web.sli 

This issue: The Slovakian agency explains 
the workload behind, its brand-spanking - new 
online portfolio that has caused quite a stii 





Producing a new portfolio website 
that gets noticed is one thing, but 
launching one that grabs industry 
attention and several plaudits is 
something else altogether... 

Marketing services or products online these 
days is challenging to say the least, with myriad 
channels utilised to effectively spread a brand or 
message. But within this world of social profiling 
via Twitter and Facebook, the humble website still 
has a massive role to play in literally providing an 
independent 'home'for who you really are. It can 
form a marketing identity and give your followers, 
connections, friends, clients and customers alike a 
memorable sense of your identity. For design 
agencies such as Slovakia's Art4web, the 'home 
page', or portfolio site, can take your skills global 
and have a profound effect on widening your 
client base. So it isn't any wonder that most 
businesses invest considerable time, effort and 
money into designing or revamping their own sites 
in a bid to better convey a creative vision. 

"Our previous website was two years old and. 
even if it still represented what we wanted, we 
weren't satisfied with it any more." reveals Art4web 
CEO Luk3£ Majzian. “Therefore we decided on a 
resolute and courageous change, which started 
from a redesign of our company logo and then 
grew into the new website. We wanted to create 
somethi ng fresh. playful and friendly . ust like 
our agency really is.' 

Since the new site at www.art4web.sk.went ive, J 
it has raised the profile of the agency and opened 
up a vast new audience worldwide thanks to 
numerous inclusions on prestigious gallery sites. 

This month we speak to the guys involved to get 
the insidetrack on how it came together... 



The newdlrectlonfonhesW^on™"“™ C p 

uisesbefore the team _ space and bringing« 

In the header the 
extent would primal 
agency showreelvuhich would show 


completely different to the ina ^ clia ^ e the 
on,V r^m^^ie'ed this option.We started 

wouKJn'tbesostandardrnsW ^ 3eency tago. 

began by taking “ n ng ide as into one 

which he solution of contemporary 

whole unit and also the <*> dwe taped offline 

j . — j, a ihUp visual ideas were 
web design- Ait essence of the 


together various colourful things. 
Tdeas joined into the contents. This 
be video, presenting an 

off our portfolio. 
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Settling on an overall graphical style - particularly for the page 
header - was critical to establishing a friendly, playful feel 





Lukas: "A big thing for us was the illustration of the 
website header; it was redrawn several times as we 
were not satisfied with it, Adam Ciganlk, our 
external illustrator, was involved id creating the initial 
graphicaod he created some basic illustrations of 
flying bubbles in space that were used in me final 
phase. These elementary shapes were put together 
in Illustrator and completed in Photoshop where we 
added pictures, textures and gradients, It may sound 
easy, but the illustration was probably the longest 


process In the whole site development. After defining 
the main mission it was necessary for us to reason 
out the whole websites logical structure and 
elements, plus the arrangement of the inner 
subpages. We wanted people to navigate through 
the website fluentry and. so far, it seems that this goal 
was achieved, as according to Facebook feedback, 
many people really do browse the whole site, 
Structure was achieved via the Mind Node program 
and wireframes were also generated with pen and 


paper sketches. We had to create a range of smaller 
details at this stage too such as custom icons. 

‘Alongside design we were putting together new 
text which was also a vital phase. Technically the text 
was composed fairly easily via the open-source writer 
from OpenOffice, We needed to combine contents 
and visuals so they wou'd enhance each other. Text 
was written by our copywriter Mca Durhcova. who 
did a great job. I personally think that thanks to her 
text a friendly atmosphere runs through our site." 


Our works 
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Luk££: As we have already written on our company 
blog (which is unfortunately only provided in Slovak), 
responses from our clients and also from our fans on 
social networks were really positive. Honestly, we didn't 
expect such good feedback. The biggest advantage of 
our new website is n being distinguished from more 
common styles. People remember this website design, 
which is supported by friendly text, and it leaves a lasting 
impression. It's almost unbelievable what the right 
combination of words and colours can do. 

"Some parts of the site almost taste like raspberry 
bubblegum. Wo were surprised hov; this 'flavour 


When it came to the backend, it took 
a lot of patient PHP programming to 
get through the challenging testing 
and debugging stage 
Lukafc "For the technical part I would like to thank my 
colleague Viliam Harajka (PHP programmer) and l 
would especially like to bow to his patience, which he 
demonstrated during the long process of webate 
testing and debugging. This was the biggest challenge 
and I think that the testing phase took much more time 
than coding the site itself. Our old website encompassed a 
very easy old-fashioned and hard-to-adapt system, so we 
had to make a brand-new one from scratch. 

' It is built on our own framework and caters to ail of the 
needs that we asked for from the beginning. Our 
demands were clear: we needed to fill in our portfolio as 
simply as possible and we also added a new blog 
subpage, so this system includes an easy editorial system 
for blogging as well. The website runs in two language 
mutations - Slovak and English; a German mutation has 
been prepared tod. but this is yet to launch." 


:• ; 4 '*« 

In the whifi df fanlMtte idea* 


impressed the female demographic of our clientele. 
Previously 90 per cent of our clients have been 
men, but this is not the case any more, Since 
launching the website, interest from female clients 
has dramatically increased with the number of 
Qmai s and calls from women having risen significantly. 
We must not forget the praise we've had on Facebook 
either. This progress confirmed to us that Art4weto is 
fulfilling a need in the market and offers a convenient 
alternative for those who not only want fresh and 
extraordinary design but also a professional solution from 
their digital agency. We have also been featured on a 


“- * 


□ 


number of gallery sites. Probably the most important for 
us was being named 'Site of the day' on Awwwards.com. 
thanks to which our website will also be published in a 
book. AH this positive coverage (including the support 
we’ve had from Web Designer) has brought us 
thousands of visits daily and a number of new clients, 
which is the best feedback we could ask for." 

d&iigiridiajry __3. 
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Shout Digital 



Shout Digital timeline 



Established 2009 
Gary Boon 


Prism Financial 

Financial advice website 
with integrated client and 
advisor dashboards. 



Dickinson Dees law firm: 
iPhone app 

UK legal firm with a pedigree 
of200years embraces the 
modem age with a mobile app. 



Smooth wall 

Web security hardware and 
software solutions website. 



OK' magazine: iPhone app 

The conception of this full 
Flash site focuses on a 
carousel of objects all 
turned into 3D models. 


Business Quarter portal 

Shout works on the online 
portal for entrepreneurial 
magazine Business Quarter, 



i 1 Were now moving away from a creative 
site to something a little more corporate if 


get across what the agency is about. In terms of 
'Shout' my ethos was simple: a single word that 
people could spell easily, say quickly and remember. I 
looked at the URL far Shout as I think it’s important 
that a company's URL matches the company name 
and discovered that Shout.com was available for sale 
but the starting bid was £50.000. It was at that point I 
decided matching URLs weren’t that important? 
Obviously we are a digital agency so Shout Digital 
came to mind and the .com domain was available so 
we purchased that. Ironically the .co.uk domain is 
owned by an entirely different agency (Shoutdigital), 
based in Weston-super-Mare, which is not a full- 
service agency but focuses on web development." 


It goes without saying that the website of a digital 
agency is paramount to its success. Boon gives an 
insight Into the thinking and intentions behind the first 
Shout Digital online presence. 

'It's really important what your website says about 
you. When we first started the agency, we came from 
a position where we had no portfolio at Shout Digital 
despite having very experienced staff members who 
had previously worked on some of the UK’s biggest 
brands. We tried to create a website which was a bit 
different to what other agencies had. so we went 
down a very creative route and were a little quirky 
with what we had on the site. The aim was to get 
noticed not only far being different but for using our 


website to showcase our creativity and capability. We 
were included in the 365 best websites in the world 
list on Awvjwards.com for this site. 

"We are now moving away from having a creative 
site to something a little more corporate to help 
people understand that we are not Just creative but 
also very technical and strategic In what we do and 
the services that we offer. Since we started the 
company three years ago we haven’L updated the 
website in terms of our portfolio, so now we feel it is 
important to showcase our wide variety of work. This 
will include losing the Shout 'monsters' and focus on 
showcasing who we are, what weve done and. most 
Importantly what we can do for our clients." 

Agencies are nothing without their customers. 
Boon reveals how the company avoided traditional 
business development and grew organically. 

"The way we have worked [since we set up shop! is 
not traditional business development, We have grown 
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very quickly. organically. Originally the agency won 
small projects through people we knew and doing 
well on those led to more and more referrals and the 
growth of the agency over the past three years has 
been purely on the back of these. 

"Going forward, however, its going to Pe much 
more structured, targeted and thought through. 
Referrals will still be important and we hope to 
continue to bring in work that wav but now we are 
able to supplement these with a proper business 
development approach. We have recently brought in 
a business development manager who will help to 
strategically target specific businesses off the back of 
the strong portfolio we have built under the Shout 
Digital name. Every agency says they are great at 
what they do but now we have a portfolio to prove it." 

Projects can come in all shapes and sizes. Boon 
explains how there is no commission that Shout 
wouldn't consider taking on. 


"Digital is so important across any spectrum of 
business that I wouldn’L turn anyone away. There is no 
piece of work that we wouldn't take on, but it is 
whether or not our services would price certain 
projects out of the water We work with SMEs as well 
as larger more well-known brands such as OKI 
magazine, so we wont preclude going for blue-chip 
names as clients, as we want to work across a whole 
spectrum and we firmly believe we can do that." 

With a project agreed upon, it’s down to work. Boon 
reveals how the workload is divvied up and how they 
continue testing even after a site has gone live. 

“In terms of what takes the longest, it really is an 
even split as all facets of the projects - from the 
creative to the technical - are equally important. 
Projects can run from a number of weeks through to 
a year depending on what the client requires. In terms 
of the way things are divided up, they are split 
between discovery, user experience, understanding 



industry 

insight 


Gary Boon, 
managing director, 
Shout Digital 


“ We don't overly use HTML5 
because it is early days for it; 
support is not universal and 
many users might not have 
the latest browsers to be able 
to use this technology » 
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Shout Digital 



Pi' SEO is important, but if you have a 
product or service which you want to sell 
then you need to look at other channels Pi 


the clients' client and business analysis, visualisation 
of the website, imagery and, in conjunction with that, 
the technical designs to get the best out of the 
strategy to achieve Its goals. 

“We have a great mix of highly skilled individuals 
who specialise In different areas such as online 
marketing, user experience design, account 
management and so on. so as a team we are all 
assigned to projects depending on the specific skills 
that are required. Time wise, even though a project 
might be complete, it doesn’t end there. We continue 
to test the site over the following months to ensure 
that Its functions meet the needs of the client and fix 
anything that we need to on an ongoing basis." 

Creative taleriL besides, a project is powered by the 
software an agency chooses to adopt. Boon reveals 
the different digital toolsets that they work with day to 
day to take a project from start to finish. 


'From the creative side of things we are Adobe- 
centric in that we will use applications like Fireworks to 
create project assets for imagery and then we will use 
different types of development environments for 
individual projects, For example, we would use Xcode 
for developing iPhone applications, while we would 
use Microsoft Visual Studio to develop web 
applications. Although generally we are Adobe 
focused from a creative point of view, it really does 
depend on the digital channel we are working on and 
if we are targeting the web or mobile platforms such 
as Android, Blackberry, iPhone, etc. So in that instance, 
we would be bespoke as we like to consider who our 
clients are targeting and work to that specification 
using the appropriate tools to do it." 

Once a project is complete it's time to hand over to 
the client. Boon gives the lowdown on the process 
and the level of aftercare the agency provides. 


"We try to be collaborative all the way through a 
project so that the client gets early access to different 
parts of the website as we are working on it. This 
means they can test it while it is still in progress and 
come back to us with any (amendments! they might 
have. We work very closely with the client through a 
user testing phase until the 'go live' date and then 
afterwards for a number of months to fix any issues. 
Most clients usually go on to a retainer to ensure 
ongoing support and so we can continuously update 
the software. We are completely customer focused 
and the level of commitment and transparency we 
give to our clients. I think, is unmatched by any other 
agency. We get the right people on the project and 
always ensure we are very much involved in the two- 
way conversation at all stages." 

It may have had some setbacks recently, but Flash 
is still a platform that Shout Digital utilises, Boon tells 
us why and what the app still has to offer, 

'If you take our original website, we had lots of 
animations that were easier to deliver In Flash. You 
can do a level of that with HTML5, but the reason why 
we don't overly use HTML5 is because it is early days 
for it; support is not universal and many users might 
not have the latest browsers to be able to use this 
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Shout Digital 



St Ermin’s Hotel 


The pressure was on to create a website that was 
just as classy as the luxury establishment 

Shout Digital created a slick new website tor four-star 
hotel St Ermtn’s in Westminster to accompany the 
completion of the grade-11 listed Victorian hotel’s 
recent £30-mtllion relurhishment, 

One of London s oldest and most deluxe hotels, the 
new visual design and restructure of the site has 
complemented the overall marketing strategy by 
vastly increasing its conversion levels - doubling its 
online revenue since going live. 

Seeing off stiff competition from six leading 
international hotel web-design specialists. Shout 
Digital was the agency chosen to redesign the whole 
frontendand also build a new content management 
system that was i n I ine with St Ermln s new look. 

Discussing this important project, Gary Boon 
reveals; 'Our ultimate objective was to help attract 
visitors to the site to then book the hotel, without 
looking like It was overly focused on sales. One way 
we did this was by making ft much easier to navigate 
towards the reservation page. 

“Because we were able to build the website 
incorporating user experience processes in all ol our 
designs, we could maximise the success oi the online 
marketing, improve SEO and therefore increase 
conversions," You can check out the deluxe flna I 
result for yourself atwww flprm imhfltPl rn nir, 


technology. Flash still allows a level of creativity 
that isn't there with HTM15 and CSS3. However, 
mobile has certainly started to marginalise Flash 
as a greater level of content is consumed on 
portable devices. In essence, we’re very customer 
focused for our clients and try to target the widest 
audience possible for them ■ so we will use 
whichever platform is best for the project at hand.' 

Of course the popular alternatives to Flash are 
HTML5-., CSS3 and jQuery; are these something 
that5hout will be adopting more freguently? 

'Both on the desktop and mobile web is where 
you will increasingly see a mixed use of HTML5. 
CSS3. JQuery, etc, and Flash will begin to decline in 
all areas. Smartphones already support the latest 
technologies rather than Flash through the mobile 
versions of the latest browsers, so we will build 
mobile sites leveraging those technologies, Again, 
it all comes back to understanding the audience 
and which channels/media their customers are 
using to consume the content: 

Responsive design is a technique that looks to 
resolve the desktop/mobile conundrum. Boon 
offers an insight into how Shout Digital deals with 
the issue. "Responsive web design is a complex 


area in terms of delivering a solution that ultimately 
needs to work on different devices and associated 
resolutions. From a digital marketing perspective 
companies need to be delivering their content 
across this broad spectrum. Unfortunately 
responsive web design means there isn't a one- 
size-fits-all [approach any more), so we work with 
our clients to deliver either a full responsive design 
or a best-fit for their needs and budget.” 

Getting a live site seen is crucial to its success. 
Shout Digital s MD reveals the things that need to 
be considered for maximum engagement. 

'There is definitely more to it than just search 
engine optimisation. It's more about looking at all 
marketing activities that you can undertake. The 
biggest channel for aLdience engagement is still 
TV adverts. SEO is important, but if you have a 
product or service which you want to sell then you 
need to look at other channels by complementing 
your online marketing which will help get the 
brand name out there. Companies need to look at 
where they want, to position their business/ 
product and constantly seek new channels or 
other forms of advertising that will help engage 
with their target audience: 



WEB ---- www.sJ-o.itd iqitfl] .com 

POUNDER .........Gary Boon 

YEAR FOUNDED _2009 

CURRENTEMPLOYEES ....... 20 

LOCATIONS _ Newcastle and London 


SERVICES 


> User experience design 

> Online marketing 
>Weta design 

> Intelligent soil ware design 

> Mobile apps 
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Keeping track of your content and understanding how to improve performance is 
critical to today’s internet. This month we focus on one of the most important allies 
for webmasters worldwide and how you can exploit its diverse toolset 


ow do you measure a website? 

A designer might say that it's all 
about pixels, negative space, 
accessibility, colour - whereas a 
casual browser might feel 
competed by the amount of 
video or level of Facebook 
integration. But if we're not 
talking about the physical size or 
perceived entertainment value, 
then the more obvious 
characterisation is surely how 
the site Is used. 

Way back when the internet opened its metaphorical 
doors and invited us to add primitive homepages to its 
blossoming network, there was little thought to how it 
would perform. You hoped people would firstly find it. 


scan the limited content and feel vaguely amused 
enough to come back and maybe pass on a link. It was 
only when the first embeddable traffic counters 
emerged that the volume of visitors* or 'hits’, piqued our 
Interest as well as the potential value this data may have. 

Fast-forward to the present day and the whole 
concept of web metrics has become far more 


sophisticated than a crudely animated speedometer. 
This is really down to two things, with the first being the 
monetisation of content and how site behaviour can be 
leveraged for advertising purposes. If we dont know 
why our website does well how it does It when and 
where, then we actually bypass a huge driver in the 
commercial appeal of online business. 


“FAST-FORWARD TO THE PRESENT DAY 
AND THE CONCEPT OF WEB METRICS HAS 
BECOME FAR MORE SOPHISTICATED” 
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THETRACKER SNIPPET 







The Google Analytics site gives you a quick overview or 
what you need to da to track visitors and analyse how 
they u se yo u r site. AH you reed to do i s add a little code! 


J 


WE TAKE A CLOSER LOOK AT THE 
CODE YOU NEED TO ATTACH THE 
GOOGLE ANALYTICS TRACKING 
CAPABI LITIES TO YOUR WEBSITE 

The tracking snippet required when attaching 
Google Analytics to your website really centres 
around ten key lines of code. Previously this was 
inserted into the <body> of the page, however it 
must now be placed just before the closing </ 
head> tag. This new method facilitates 
asynchronous tracking of a page and therefore 
I eve rages asy n ch ronous syntax via the _g aq 
object This is essentially a command queue that 
accepts API callsfor when Google Analytics 
(specifically ga.js) is ready to perform them. The 
gaq.pushO method, which often appears in the 
first part of the <script> snippet, is therefore used 
to invoke various methods. These are not 
essential, but are most useful when telling GAto 
handle certain search keywords or other search 
engines when compiling reports. Below we 
b rea k down the basic list i ng a nd some optiona I 
statements, but first we u nderli ne a few key ti ps 
for adding it toyour pages: 

• The tracker snippet should go just before 
the closing </head> tag 

* Other scripts should be placed before the 
tracker snippet within the <head> for 
optimum performance 

- Google An aly tics only tracks pages that 
contain the tracker snippet Copy and paste 
into each <head> section or use includes 
■ Place the tracker snippet within header, php 
for Word Press-based websites 

‘ You must add your assigned Google Analytics 
web property ID> obtained during the initial 
registration phase. 


Combine this with the rise of Google, a company that 
understood the first point so welt and you then have an 
infrastructure, or ecosystem, where web metrics can be 
harvested ait no cost. Google Analytics (GA) delivers a 
free toolset that any URL can utilise to track key statistics, 
but crucially have them fed back visually across a series 
of reports, In this feature well present a thorough 
overview of GA's capabilities, from setting it up. explaining 
the tools on offer and the results they produce, but also 
what it can imply for ramping up the effectiveness of 
your sitetsl Once you get the hang of measuring web 
success this way, you'll find it a pretty addictive method 
for driving traffic in and, equally vital, keeping it there. 

STARTING WITH GOOGLE ANALYTICS 

There's not much you need to get started with Google 
Analytics apart from a website and an HTML editor. It's a 
free service (unless you're running a very large and very 
busy site), and all you need to sign up is a Google 
Account While a Google Account Is essential It doesn't 
need to be your primary account, so you can keep 
things separate from your personal Gmail address. 
Signing up is relatively simple Start by logging on to 
Google Analytics and giving your account a name. 
Accounts can be connected to multiple sites on multiple 


domains, so while most organisations will want a 
separate account for each site, you can just use one 
account to track all the sites and domains used by a 
single service. You'll need to configure an initial URL - 
either http or https. There’s also support for applications 
that aren't websites, when you want to use Google 
Analytics with an app or a service on iOS or Android 
devices. Google will use this Information to configure a 
tracking ID that you'll add to your page content. 

Google gives you the option of sharing your analytics 
data with other Google products you use, so you are 
able to fine-tune advertising with AdSenseand Ad Words. 
There's also the possibility of sharing data with the rest of 
Google, as part of an anonymous benchmarking project 
While benchmarking is useful, and lets you compare 
your site with others In the same industry or market, you 
may not want to share data at this stages Choose where 
you're based to accept the appropriate terms of service 
- and read them carefully. You'll see that the service is 
free for up to 10 million page views a month, though 
Google does reserve the right to add supplementary 
fees for additional services. 

You're now ready to hit the Create Account button. 
Google Analytics drops you straight in to the settings 
page for your site, where you'll see the tracking ID it uses. 
While Google provides JavaScript code for your pages, 
some CMSes and blogs have Google Analytics modules 



001 */ basic tracker listing WITH COMhtNTS 
m 2 

903 <script type=”text/javascript*^ 

004 var _gaq = _gaq I | []; 

005 //Below, where X requires your Google 
Analytics web property ID 
006 _gaq.push([‘_setAccount', 'UA- 
mXXXX-X 1 ]); 

007 

008 //Optional statements (see below) 

wouLd go here 

009 

010 //Main logic for GATC (Google Analytic 
Tracker Code) 

011 _gaq.push(C'-trackPageview , 3); 

012 

013 (function/) { 

014 var ga - document. 
createFlenient( f script*); ga.type = *text/ 
javascript 1 ; ga.async - true; 

015 go,arc = ('https: * — document, 
location,protocol 1 'https://ssl ' : 
'http:// www f ) + 1 .gnnElp-anfriyfins mu/ 
ga.js 1 ; var s = document, 

getElementsByTaglTame( ' script h ) [0]; 
s,parentNode,insertBefore(ga, s); 

016 })(); 

017 </script> 


CONTINUED 
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CONTINUED 



OPTIONAL STATEMENTS 

Alongside the basic snippet, there's a series of 
asynchronous methods used to pass certain 
parameters that dictate how G A interprets 
certain data. These are largely concerned with 
how associated search keywords, engines and 
sister sites are fed Into the reports. 

Often you'l I wa nt to inclu de disce r nible 
search attempts to access your pages as direct 
traffic as opposed to generic keywords, while 
access via an associated sister website 
(perhaps within the same organisation) is again 
classified as direct rather than referred. 

ADD METHODS 

001 //Exairple asynchronous method for _ 
addlgnoredQrganicQ for defining terns as 
direct traffic but excluded from Keywords 
reports 

002 _gaq.push{['_addrgnoredOrganic f r 'web 
designer magazine']); 

003 _gaq.pu sh ([' _add IgnoredOrgan i c r f ' web 
designer 1 ]); 

004 _gaq .pu sh ([ H _addlgnored0 r gan i c r , 

1 ivebdes i gnermag .ca.uk 7 ]); 

005 

006 //Used to exclude a .source as a 
referring site, treated instead as direct 
traffic 

007 _gaq . pu sh ( t ' _add!gnoredRef J , ' www-. 

jjnagine-publ i shine, co. uk ’ ]); 

008 //Adds search engine to be included 
as new organic source where 
newOrganicSource is the engine., 
newOrganicKeyword the Keyword 
name, opt_prepend a boolean value for 
adding engine to the engine to the 
beginning of the organic list if true, or 
the end if false (default) 

009 _gaq.push([ J _addOrganit’ , 

‘ n ewOrgan icE ng ine * , F newOrga n i cKeyword 1 , 

‘opt_prepend 1 ]); 

CLEAR METHODS 

001 //Clears strings previously set for 
exclusion from Keyword reports 
002 _gaq,pu5h(['„clearrgnored0rganic J ]); 
003 //Clears items previously set for 
exclusion from Referring Sites report 
004 jjjaq, push (['.clear I gnoredRef f ]); 

005 //Clears all search engines as 
organic sources 

006 _gaq . push([ ' _c LearOrganic']) ; 



“MOBILE SITES ARE TRACKED 
FROM THE SERVER VIA A DYNAMIC 
IMAGE RATHER THAN THE BROWSER” 


that configure your pages for you. All you need to do in 
that case is copy the code and then drop it into the 
appropriate control panel on your site or host If you're 
adding code to your site directly there are three options; 
Standard, Advanced and Custom. The Standard option 
Is the one you're most likely to use. as it gives you a 
simple section of JavaScript code that you can copy into 
Lhe head sections of the pages (or into your HTML 
template). You’ll need to insert the code into every page 
you're tracking, so taking advantage of the templating 
tools in Dreamweaver or another HTML design package 
can simplify the process considerably. 

You’ll need to define Just what you’re tracking before 
you can add the code to your site. Are you looking at a 
single domain, or one domain with multiple 
subdomains, or a site that maps multiple top-level 
domains? You’ll also need to choose whether you're 
using the code alongside any AdWords campaigns. 
Once you've picked the options you warn cut and copy 
the Google Analytics JavaScript 


002 

003 

004 


<sc ript type=”tex t/java sc rip t"> 

var _gaq = _gaq | | []; 

_gaq.push([ £ _setAccount', 'Your 
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Tracking ID goes here’]); 

005 _gaq.push(['.trackPageview’]); 

006 

007 (function0 { 

008 var ga = document, 

createElementC'script'); ga.type = 'text/ 
javascript'; ga.asyne - true; 

009 ga.src = {‘https:’ — docunent. 

location.protocol ? ‘https://ssl 1 : 'http:// 

www') + '. google-artalytics.cojti/ g a. j s J : 

010 var s = document, 

getElementsByT agName('script')[©!; 
s.parentNode.insertBefore(ga r s); 

011 ))(); 

012 

013 </script> 

The code goes el the end of the <head> block of each 
page, just before the closing </head> tagi 

ADVANCED CONFIGURATION 

The Advanced view adds tools for measuring mobile 
sites, with support for various server-side programming 
languages (including PHP, Perl, J5P and A.SPNF I? Mobile 
sites are tracked from the server using a dynamic image 
rather than the browser as some mobile browsers don’t 
support JavaScript Most modem mobile browsers 
should support the client-side code used by desktop 
browsers, but Google doesn’t recommend using both 
versions of the tracking code on the same page - so you 
may wish to use browser-sniffing techniques to 
dynamically deploy the appropriate tracking code lor 
your users’ browsers. Getting analytics right for mobile 
can be complex, and it’s well worth spending time to 
understand which mobile browsers are visiting your site 
before implementing any analytics code in your pages 
Use your server logs to extract a list of the user agent 
strings from all the browsers visiting your site. 
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GOOGLE 

ANALYTICS 


UM Ihti CUitofil Reporting Screen to generate your C(W(1 reports, 
eittier visually or as flat tables, Just add metrics and dimensions 
and* if you want to compare to another site, profiles 


You can also use the various tracking options to 
manage different types of advertising campaigns, not 
just Google's own toots. There's an option to add Lhe 
appropriate tags far the various terms used by different 
advertising sites, so Google Analytics can translate them 
to give you consistent reports, If you've been using 
Urchin (the software Google Analytics is based on) you 
can also utilise this feature to migrate from local analytics 
to Google's cloud-hosted service. 



If you're working with dynamic content use Lhe 
Advanced view to generate the appropriate code to 
drop into your page templates. Tracking dynamic sites is 
an important feature of Google Analytics, as it lets you 
see just how users move through a site, helping you 
optimise eGommerce paths PHP-generated dynamic 
content needs a slightly different approach: Instead of 
using JavaScript in your page templates, you’ll need to 
save Lhe tracking code as a separate PUP page, which 
you can then use with aPHP include statement to drop 
into your pages - though here it goes at the start of the 
<body> tag rather than the end of the <head>. 

If you choose the Custom option then you can use 
the sample code in the editing window to create your 
own tracking scripL If you need to start from scratch at 
any time just click the Clear changes text at the bottom 
of the window. All three options also let you cut and 
paste a pre-formatted email that can be sent to any third 
parties you may have working on your site. 

A single Google account can manage many different 
site accounts, giving you one place to explore reports 
from all your different sites. You can also assign several 
users to an account so while one might administer all 


your Google Analytics sites, reports can be accessed by 
users with specific responsibilities. Agencies will find this 
approach particularly useful setting up a master 
account for the company and then giving users access 
to the reports they need for the clients they work with, 
without seeing the reports used tor other sites. 

THE METRIC SYSTEM 

It's to good having analytics tods attached to a site if 
you don’t know what youYe looking fori You can 
measure everything* and anything but without 
understanding what each metric Is. and what It means 
for your site it might just as well be random noise. 

Once you've set up a site for tracking, you can go to 
the Home tab for the account, You'll see a basic 
dashboard* with the initial metrics far your site - though 
there wont be much on a first visit, as Google Analytics 
only tracks data from the time you've added the tracking 
code to a page/site. The basic dashboard gives you a 
quick overview of the last month's traffic showing dally 
visits, the average time spent on your site by a visitor, the 


key sources of traffic and where visitors are coming 
from (as well as how long each country spends on your 
site). You also get to see what proportion of visits come 
from mobile devices, 

Each widget on the dashboard graphs a different 
metric and you can click In to get a fuller report Its a 
good idea to build your own custom dashboard, pulling 
in the metrics you want to use. We'd recommend 
starting with the Google Analytics Standard Reporting 
view, Click through to see the key audience metrics far 
your site: visits, unique visitors, pageviews, pages/visit, 
average time on site* bounce rate and new visits. 
Sparklines give you an immediate overview of the trend 
for each of these metrics. Google defines them as 

- VISITS: The total number of visits to your page. If a 
user is inactive for half an hour or more, any future 
activity is treated as a new session (visit) 

■ PAGEVIEWS: How many times the pages on your site 
have been viewed 

- PAGES/VISIT: This shows how many pages users 
view when they come to your website 

* BOUNCE RATE: This shows the percentage of users 
that left after viewing only one page on your site 


- AVERAGE TIME ON SITE: This indicates how long each 


“A SINGLE GOOGLE ACCOUNT CAN MANAGE 
MANY SITE ACCOUNTS, GIVING YOU ONE 
PLACE TO EXPLORE [ALL YOUR] REPORTS” 


user spent on your site 

* NEW VISITS: This shows the percentage of your users 
that have not visited the site before. 


You can change the date range for the various graphs 
and also opt to compare different date ranges - helping 
you see the effects of a new site design or your latest 
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advertising campaign. Indeed, mats one of the most 
important features of Google Analytics - the ability to 
compare sections of data. 

Not all sites are HTML, of course, and Google has 
fools for tracking more than just standard page content. 
You can use scripts So track events or virtual pageviews 
for downloads (so you can track content in PDF form! 
while other tools also handle outbound links from your 
site (so you can track the users you're handing over to 
partners, for example, as part of a revenue sharing deal). 
You're also able to use scripts and libraries to track inside 
Flash movies or eCommerce shopping carts. 

DASHBOARDS 

By far the easiest way to customise Google Analytics Is 
using dashboards. These let you drop widgets onto one 
of 20 dashboards per profile with each widget showing 
a graph or a table for a particular set of dimensions and 
metrics. Chart options include pie charts and timelines, 
white there's also the option of just showing a particular 
metric You can add filters to widgets, as well as treating 
custom reports as widget contents. 

Each dashboard can cover a different time frame, set 
using the time control in the top-right of the screen. You 
can seta custom view or a relative range; relative ranges 
simplify using dashboards, as they give you all the 
relevant data for the last week or month. You can also 
choose to compare dashboard contents to the same 
data from a different time period, using the Compare to 
past feature. Specific dashboards can be assigned to 
specific users too - but at the moment need to be 
created in that account, as you're currently unable to 
share dashboards with other users. 

THE STANDARD REPORT 

At the bottom of the Standard report are a set of tables 
that give you a quick overview of key demographic and 
system metrics. You can use the demographic tools to 
see the languages used by your users, helping define 


your internationalisation strategy Other useful data 
Includes their country of origin and even the cities they 
come from. Extra features let you see the service 
providers used, which can give you an idea of the effect 
of proxies and the like on your site operations. 

Choosing the System option lets you see the 
browsers that visitors are usingt along with operating 
systems and service providers, You can dick on any 
entry to drill down further, seeing how your site usage 
metrics break down across different browsers. Opting 
for a secondary dimension. you can extracL details of 
the specific version used, the underlying operating 
system - even the number of screen colours and the 
resolution (plus if there’s support for Java and Flash), 
Mobile users are similarly broken down by operating 
system and screen resolution. 


Sometimes the most important data that you get 
from tools like Google Analytics isnt what you’re looking 
for. That's where the service's automated Intelligence 
Events come in. Google Analytics triggers an alert when 
there's any significant changes in traffic patterns on your 
site - whether it's a sudden spike in the number of users 
or if it's a change in the bounce rate. You can use this 
information to correlate sudden shifts with changes in 
your site or advertising campaigns - or even with the 
release of a new browser or mobile device. 

Alerts don’t necessarily have to be automatically 
generated either: instead, you can create your own 
custom reports. All you need to do is set up an alert for a 
specific metric - tor example, if you get over a set 
number of pageviews in a certain amount of time, or if 
pageviews spike by a specific percentage, etc. Then 



You can use the 
Standard Reporting 
view to show where 
you r users come from 
- right down to their 
home city. Location 
reporting can help tie 
site performance to 
streetand transit 
advertising campaigns 
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choose how often you want any alerts to be generated 
- whether that's dally, weekly or monthly Alerts can be 
sent by email, or if you're in the US. by text message 


CUSTOM REPORTS 


While the default reports and dashboards are packed 
with useful information, you can also create your own 
reports. Like working with any desktop business 
analytics tool you'll need to start by defining Lhe 
dimensions things like visitor type, the referring site or 
a specific page URL. Once you've chosen your report 
dimensions you can then select the appropriate metrics 
for each dimension you've used. Google provides a 
useful tool that lists the dimensions and metrics used by 
Google Analytics, along with the valid combinations - 
check it out here: httPL/ZtinyurLcomtoreapi. A custom 
report can have up to five dimensions and up to 25 
metrics. You can add filters so that users can explore 
data as well as bringing in metrics for other sites you're 
analysing. Reports can be added to dashboards or 
exported as a CSV file for further analysis. 

More complex reporting and data comes when you 
start adding goals to Google Analytics. Goals are what 
Google Analytics uses to determine whether a website is 
meeting your targets. Once a goal is achieved by a user 
it's counted as a conversion. There are currently four 
types of goal that you can set 

- URL DESTI MAHON: This is a specific page that a user 
has viewed; for instance, this might be the checkout 
page for an eCommerce shopping cart 


■ TIME ON SHE: This is the total amount of time a user 
spends on your website, or on a specific section of 
your site. You could use this to see how long they 
spend browsing your catalogue, for example 

■ FAGES/VfSIT: This Is the number of pages you expect 
a user to look at on your website, or the amount 
you'd like them to be reading. It's a good metric to 
use for a content-heavy site 

* EUE NT: I f you've set up event tracking this Is triggered 
If a user completes the event - for example, 
downloading a music track or a PDF. 

Goals can be grouped into sets, and these can he used 
to manage tracking a host of different targets for your 
site, Each Google Analytics profile can have up to four 
different sets of goals, with a maximum of five goals per 
set. Goals have a value, set by the number of conversions 
and the numeric value of the metric associated with the 
goal. If you're using a URL destination goal you can also 
set up a Goal Funnel - the series of pages you intend a 
user to take to reach the destination. You can use this to 
see where users drop out of the process, enabling you 
to pinpoint which pages need investigating further to 
improve conversions - and increase your site revenue. 


TIME TO GET REAL-TIME 


The latest update to Google Analytics is GA Real-Time, a 
tool that shows current activity on your site. At this 
moment the feature is In beta but Is ready for use. Its 
best thought of as a tool for dynamic sites, so if you're 
running a news blog or similar, you can use it to quickly 


“GOALS ARE WHAT GOOGLE ANALYTICS 
USES TO DETERMINE WHETHER A 
WEBSITE IS MEETING YOUR TARGETS” 


KEEPNG IT REAL-TIME 


Tlie; Google Analytics Real Time view lets you see justwha is 
on yaur site, where they’re from and how they gat there - as 
■well as giving you a look at the rate of page views over the 
last few ml n utes and second s 



0 nee you 're usi ng Real Ti me. you can drill dawn for 
additional data, like plotting user location's an a large map. If 
you’re driving content socially you can use this to work out 
where and when to ta rget your next update 



You can use the Real-Time view to show me sources of clicks 
on yaur site. Are users earning ham search.from links ar 
From social med ia services? You can al so find out where ya u 
get the mast traction, eg Faeebook or Twitter? 
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ANALYTICSGLOSSARY 

BRINGING INSTANT MEANING TO THE 
JARGON USED IN WEB METRICS 

BOUNCE RATE 

The percentage of visitors who enter a specific 
site, then leave or 'bounce' without viewing any 
other pages within the same website 

EXIT RATE 

Describes the percentage of visitors who 
actively dick away to a different site from a 
specific page, having previously visited any 
other pages on the first site. 

WEB TRAFFIC 

Typically refers to the amount of data sent and 
received between a visitor and a target website. 

HITS 

More specifically describes the request for a file 
from a web server. Hits are often used to 
establish a website's popularity 

REAL-TIME 

As it happens, at this exact moment, offering 
feedback on what is cuirently happening live 
rather than what's happened in the past. 

WEB METRICS 

The particular study and analysis of online data 
for th e purpose of optimisi ng pe rformance. 

VISIT/SESSION 

A series of page requests from one uniquely 
identifiable sou roe .often logged over a 
pre-defined period of time, 

UNIQUES 

Relates to those visitors to a site defined as 
being unique, most commonly on the basis of 
stored cookies. 

SINGLETONS 

Number of visits where only a single page of a 
site is viewed before a bounce, 

PAGE VIEW/IMPRESSION 

A req uest to I oad a si ng le H TML docu me nt from 
the web server, or a dy na mica I ly loaded 
element with in a page, 

ENGAGEMENT 

Denotes activity and actual interaction with a 
page a nd the ti me a visitor may spe nd 
'engaging with the content, 

FREQUENCY 

The measure of how often visitors log on to a 
website roughly calculated by dividing the 
number of visits by the number of uniques. 

REPEAT VISITOR 

A visitor known to have made at least one 
previous visit to a specific site or page, 

REFERRAL 

Where a visit is the result of a recommended or 
referred II nk from a th I rd ■ party sou rce. 



IT you are 
using Google’s 
Webmaster Tools 
wltbaslteyoucan 
connect it to Google 
Analytics to get a 
better view of how 
SEO improves site 
performance, 
letting you tune 
content and design 
to work together 



^ Home 

+ ADO WIDGET 


Standard Reporting Custom Reporting 


My Dashboard 


TH E GOOGLE ANALYTICS DASHBOARD LETS YOU QUICKLY SEE J U5T WHAT 
YOUR USERS ARE DOING, WITH A SETOF CUSTOMISABLE WIDGETS AND 
REPORTS THAT GIVE AN AT-A-GLANCE OVERVIEW OF SITE PERFORMANCE 


Traffic Types 


I 39.17% direct 

16,358 Visits 

37.55% organic 

16,165 Visits 

1 10.79% referral 

8,091 Visits 

2.37% email 

1.024 Visits 

1.02% twitter 

441 Visits 

1.10% Other 

4S9 Visits 


0 * 


This section 
Indicates where 
site traffic Is 
coming from. 
Direct is traffic 
directly from the 
URL, Organic is 
traffic from 
searches and 
twitter Is referrals 



from tweets- 

1 

Mobile Visits 


s * 

I A custom widget that 

1 in&tantlv urevie , A , £ the 

Mobile 

Veils 

Pagsviews | 

1 deference between 

I data (visits, page 


No 

40,016 

107,736 

1 views) for mobile arid 

1 non-mobile traffic 

Yes 

3,020 

5.752 


track the viral nature of a story, watching the effect of it 
passing through social networks, seeing where it gets 
the most traction and watching where it gets re-linked. 

Google Analytics Real-Time gives you a basic report 
view, with a single dashboard that shows fie current 
number of acLive visitors on a site: indicating which are 
new visitors as well as those that are returning. You get a 
look at the referrers they've used to come to your site 


too,, and you can see how services like Twitter and 
Facebook drive engagement, Alternatively, if you're 
using services like Ad Words to bring visitors to your 
website, you can uncover the keywords that users are 
clicking on. helping you to refine campaigns. There's a 
tot you can do with both these pieces of information. 
You can use the first to determine just when a Twitter 
account should post, or a Facebook page update, white 
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Dally Visits 

3,000 


pH ^ 


r -^ 

This chart plats a 
visual representation 

3,000 

This determines how 
many visitors are 

of dal ly vl sits across a 
selected time period 

currently on-slte. It also 
reveal their geograp h ical 



Ideation and status ie, 
new or returning 






30 Dec 2011 29 Jan 2012 

Right now 

5 


1.500 


1 Jan 


8jan 


15 Jan 


22 Jan 


Time on Site by Country 


B <* 


! Counify/Temiwy 

Visits 

Avg. Time on Site [| 

United States 

9,947 

00:02:07 

united Kingdom 

B.59Q 

00:02:10 

Russia 

2,560 

00:00:33 

India 

2,516 

00:04:09 


“GOOGLE ANALYTICS 
REAL-TIME [WORKS 
BEST! FROM INSIDE 




eh. 


the second can help to reduce your advertising costs by 
enabling you to target your spend appropriately 
Other pans of the Real-Time reports show pageviews 
per minute and per second, along with a dynamic map 
that displays precisely where your viewers are located 
around the globe. The map may, at first glance, appear 
to be eye-candy, but it’s actually a super-useful pointer to 
understanding which parts of the world are likely to 



engage with content at various times of the day For 
example, a breaking item may need to be reposted on 
social networks to catch both European and American 
peak Interactions. You can drill down Into this date more 
deeply, seeing the countries you getthemost Interaction 
from. Two other views show traffic sources and the 
content that was viewed, letting you focus on the 
metrics that matter to you from hour to hour. 


There's one thing to note with Google Analytics Real- 
Time while it works in all modern browsers, you will gel 
the best look and feel from inside Google's own Chrome. 

USING YOUR DATA 


Using the data you get back from Google Analytics can 
be harder than getting the s^vice running or building 



feature 
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If you want to drill 
flown on a specific 
aspect of your site, 
create a custom 
report, Here we've 
made one that 
shows new visits 
and breaks them 
flown by the 
browser used 
Custom reports Gar 
alsobeaflfled to 
dashboards 



reports. Raw data is all very well but how can yoo sort 
the wheat from the chaff and ultimately transform it Into 
ways of making your site more efficient? 

The real key to using a Loot like Google Analytics is 
asking the right questions. If you're concentrating on the 
effects of an advertising campaign you should take 
advantage of its comparison toots to ask (and answer) 
questions about the reach of a campaign and its effect 
on your traffic. Alternatively, a designer could use reports 
to understand Just how optimising the site for specific 
browsers affects its usage, or to help tweak a mobile 
version of a site to attract more than just iPhone users. 

Understanding which browsers your visitors are 
using can also help modify sites to take advantage of the 
latest HTML5 technologies. If you’re finding the majority 
of your users are operating HTML5-capable browsers, 
you can start to migrate site support away from older, 
less capable browsers and take advantage of the more 
modern approach to site design, while still monitoring 
the effects of changes on older browsers. You can also 
keep close tabs on how changes affect how long users 
stay on the site plus how they interact with eCommerce 
and other key features, 

Getting to grips with your mobile users is increasingly 
becoming more important and the host of tools in 
Google Analytics will help you optimise your site for 
mobile devices. Knowing which devices they use is 
crucial., and you can get a feel for that from the 
breakdown between the different mobile operating 
systems. However, while iPad and iPhone get different 
entries, all Android devices are batched together, 
whether they’re tablet or phone. As a result, you'll need 
to drill down into screen sizes to determine the 
percentage of tablet users visiting your site in order to 
come up with the best possible layout, 

!t r s important to remember that Google Analytics isn't 
a performance-measurement tool, You won't get details 
of how pages load on users' browsers or how your site 
handles heavy load. For that you'll need a separate user- 
experience testing tool and some additional business 
analytics software (which can be something as widely 
available as Excel) to combine the results from different 


operations. Google Analytics lets you export your data 
In a number of different ways, ready for you to use as 
part of your overall site^measurement process. 

One useful option is to link GA to Google's WebmasLer 
Tools. This lets you see SEO and search data as part of 
your Analytics helping you tune site content to both 
appear in searches and attract and retain visitors, 
Getting the content that works well for both can be 
difficult so any tools that help you find that balance can 
prove Invaluable The result Is a site that looks and feels 
natural avoiding the stilLed nature of pure SEO-driven 
content, while still appearing high in search results. 


LETTING YOUR USERS KNOW 

Google Analytics is a useful and important option for 
any site that needs to track and manage usage. However 
anyone using the service needs to be aware of the 
effects of an European Union directive on cookies* 
which the UK Information Commissioners Office will 
enforce. As Google Analytics sets a first-party cookie; 
you'll only need to Inform users and get consent once. 
However If you’w opted into the benchmarking service, 
you will also need additional consent for this, as trackrig 
information is shared with third parties. 


TDCWnC WHATS HOTTEST RIGHT NOW? GA’S SISTER SERVICE REPORTS 
I flLllUa THE TOPICS OR KEYWORDS THAT ARE CURRENTLY TRENDING 


Apart from your own site, you'll often want information 
on how other information 5 being consumed globally 
just to t©ep your linger on the pulse. Google Trends 
alows you to enter a string of keywords to compare 
hgw popular they are today as well as comparing 
them to their popularity n previous years. 



The opening &oogie Trends page fwww.ffee 5 le.com/ 
hxvHi looks just l Ike the regular grigine and allows you 
to enter multiple search keywords at once 


Each term entered is plotted on the same chart 
which proves usefij when deciding between 
keywords you may be planning on using with! n a site 
or page In addition, you'll get feedback on Google's 
most trending search terms and where they are 
proving mosL popular across major- regions and cities. 



Once you Veiauttered your search terms, Trends gives you 
feedback on how popular they are with a chart and also 
links to those sign if leant site references 



Links to the hottest dally search terms in tne States offer 
News articles, Blog posts and Web results, along with an 
indication of peak times 


tools and give you a greater insight into your site’s 
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# heart internet 

UK’s MOST ADVANCED 
RESELLER HOSTING 

Sign up to our award winning Reseller Hosting and sell unlimited websites with unlimited 
web space, bandwidth, databases, email and more, all at no extra cost. 


The complete Reseller Hosting solution 

Setl unlimited websites and domain names, as well as our wide range of additional products to 
tit your customer s needs. Use our hosting billing & CRM solution ^HostPay 1 to sell In real time. 

100% YOUR brand 

Every aspect of your hosting is white label and can be branded as your own, including your 
customer's control panel, webmail, welcome emails and anything else you can think off 

Create your own packages 

Customise each account to any level you like. From how much web space and bandwidth 
your customers get, to selecting what web apps they can install from their control panel. 

24/7 UK support 

We donl employ any contractors, temps or external support services; all our support 
team are 100% based in our UK offices and full time members of staff. 44 

No hidden fees 



4 

=IRSTMON 



DNU 


1 

£1 






Increase your profits wtth 
exclusive reseller discounts 


C Dedicated Servers 
G Virtual Servers 
G goMobi 
G SSL Certificates 

G Hosted Exchange 
G Premium Email 

C Bulk Domain Names 


Heart Internet support their 
customers with market-leading 
hosting technology at 
great pno» 


All the features you need to attract and manage customers are included as standard. Unlike SliZI PGITY 
our competitors wo don’t charge you for basic functionality, such as your customers getting a r * ch4T4l ° 9¥ 
brandable web hosting control panel or additional MySQL databases. 




As well as selling unlimited websites, pick and choose from a wide range of additional products, Including: 


Sell Dedicated Servers 

Only £59.99 per month 


No annual contract 


J Unux S Windows / 

/ Dali & Intel hardware 1 

y No set up costs ' 

y Full white label server control 
panel for your customers 

y Sell servers in reel time 


Sell Hosted Exchange 

Only £4.99 per mailbox 


y MS Exchange 2010 as standard, 

J Free Outlook 2010 for you & m 
your customers 

y 10GB storage \ 

j Transfer In Exchange 2003 & 
200? easily 

/ Sell Exchange in real time 


Sell Virtual Servers 

Only £B.99 per month 

/ Create your own VPS packages a 

•/ Full API Integration f 

/ Unux & Windows I 

«/ Dell & Intel hardware ' 

/ Full whtte label control panel tor 
v your customers 

•/ Sell VPS In real time 


Find out more: www.heartinternet.co.uk 
Call us: 0845 644 7750 

Narmil Price (ram airly C28.SB per month 


# heart internet 

www.heartinternet.co.uk 











Responsive design blogs 

From desktop to tablet to smartphone, the online experience is no longer tied to a 



Stephen Caver 

rtta/ZstephencavercQni 

Development platform H FML. CSS. puery 

This is more erf a journal than a blog, though in many 
cases there is little difference. It uses a limited selection 
of components to create the basis of the page and adds 
in some icons and backgrounds to round, off an 
effective and eyecatching site. On mobile devices users 
see a simple rearrangement of page elements to create 
an even better-looking version than the desktop. 


Big Bite Creative 

http-//big bitecreati ve.cQm 

Development platform WordPtSSS 

The dean design is per fed ly complemen ted by a 
selection of retro ribbons, subtle textures, a subdued 
colour palette and bold fonts. The layout is a single 
centralised column headed up by an ever-popular 
image slider. The whole context of the site lehds 
itself to the small screen with all the content shilling 
to the middle - ideal for viewing on smartphones. 


SimpIeBits 

htto.feinniDlebit5.CQmi 

Development platform - IT ML, CSS. jQuery 

SimpIeBits is exactly that - a simple blog layout with titles, 
images arid tex t. The site uses a single column with a very 
subtle texture and shadow for depth. To emphasise the 
blog a complementary repeating background completes 
the canvas. As the screen size shrinks the text simply 
wraps and the navigation takes up a central position 
demonstrating a more subtle use of media queries. 
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<1ilog beautiful* 

Responsive design blogs I 


seen^rsuggesl Tweet a 140 with your blog’s address directly to %> @webdesignermag 
atlieme Email your suggestions to 4$ webdesigner@imagine-publisliing.co.uk 

single size. Here we pick six prime examples of the art in their responsive states... 





V tkirb-t 1m iiul tJw Iru lti 


jubfoA rmtr falls hi krwrd in ilnw jtw* 


first, ttie service Si Me r becomes a J 
. Static list and, second, main j 
. imageslider reverts to tbe^ 
companv logo. 


Rob \iiikiri ir h conn) im\ pUcr 
ati h brink ilrfrii v 

fipdia»ofttiltkdka|iiippE •nJk 

hm itU», 


Hair 

facials 

waxing 

massage 


Danm AirtjJr WDat hpiMe Vi flijJvr ■ tW-jJ 

IS* Otto* *1^ y» Hr»«fAi-£c*r< to m 4 Mina 

(hubcife Am nx Linj fed, Dm UcHjk.ud Rdbal hiiil Ad la tki 


RHhli 

artic Boston ^bbc 


•«« 


Plern to drop out, hack Gingrich 


tWw ivmtM^Hikl ncijfli un Miiulllimnr irv.nim-> 

Pwf'tmwlefll <A*ul> u*(hi upttUdlHwk i»l pwM 




k«/ & kkttfult an appointmtnf? 

Ready to relax and indulge yourself al Berkshire Salon 
and Day Spa? Schedule an appointment today to take 
advantage at featured servees such as facials «axng 

hair manicures pedicures and dermatology 


hom# salon ma&ug* body lime#-* m«k*up 
nails staff packages gift cards products schedule 


FI 


The Boston Globe 

www.bQ5torgtobe.com 

Development platform HTML CSS, JavaScript 

The Boston Globe Isa typical newspaper/magazine 
web presence using a white background, black text 
and an old English style title torn. The layout is again 
typical newspaper, but where the site excels is on the 
small screen. The big tabbed navigation menu scales 
down neatly and fits at the top of the page with all 
the content neatly stacked below for easy reading. 


Berkshire Salon Day Spa 

www.berk5hire5rilondrT.r5pa.com 

Development platform Drupal 

Early adopters of web technologies and trends are 
typically from within die industry, making this spa site 
something of a rarity. A big image slider dominates the 
desktop version along with the wood and plant theme to 
emphasise the orgamc brahd. The liquid layout neatly 
reduces the content to create a user-friendly scaled-down 
version, minus the image slider of the desktop layout. 


Trent Walton 

http://trentwaltQn.com 

Development platform WondPreSS 

On the face of it there's nothing too fancy here - just 
good clean semantic design with a subtle Seventies 
colour- palette and well-matched textures. The 
animated title is an astute touch giving a solid focal 
point. This image neatly scales with the browser and 
the text wraps to create a concise small-screen 
experience with easy access to the navigation. 


bfogbaasatifi.il 
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<tiitorinls> 



navigation 
effects with 
CSS3 alone 


Animate menus without any plug-ins, 
scripts or Flash - just cascading styles 

tools 1 tecli | trends Graphic editor teg Photoshop). HTML editor (we 
used Dreamweaver, but any will do) ejqieit Sam Hampton-Smith 



SS3 is maturing to the point that we can 
safely start using it for visual panache 
on the most fundamental elements of 
our websites. While it's still true that a 
11:IE! E! reasons ble percentage of users won't be 
: HiiiiiS ■ :: + a ble to see the ex tra aesthetic spar kle 
CSS3 can add. so long as you. as a 
designer, don't come to rely on CSS3 for 
the main functional aspects, the world is 
very much your oyster. The web is 
already abound with examples of this 
'progressive enhancement' in action, so there's no 
reason not to embrace the opportunity yourself. 

In this tutorial we're going to take a base, unordered 
list that's being used as a navigation menu and give it a 
CSS3 power-up. The end result will respond with a nice 
tactilitv. taking advantage of native browser rendering 
to produce a smooth, polished animation, Most 
importantly, the effects we add will progressively 
enhance the UX. so if a user doesn't have a modern 
browser the menu will continue to work perfectly well. 

While we're at it. we will also take the opportunity to 
have a quick look at embedded fonts, CSS-rendered 
background graphics and predefined CSSS animations. 
Once youVe completed this step-by-step, you'll be fully 
armed to add progressive enhancement to your own 
designs - so let's get going! 

...so long as you, as a designer, don’t rely 
on CSSS for the main functional aspects, 
the world is very much your oyster §i 



The basic HTML 

” The first thing we need to do is get a solid base 
down. We've opted for a very basic HTML page that 
features a ^div> containing an unordered list with 
navigation links, plus two further <div>s: one for content 
and another for a heading. You can copy the full HTML 
from either the 'start.html' file or the 'Step code' folder, 
both of which can be found on this issue's cover disc. 

001 <EDOCTYPE HTML> 

002 <html> 

003 <head> 

004 <meta http-equLV="Content-Type" 

contents” text/html; charset=UTF-S ff > 

005 <title>Advanced Navigation menus with 

CSS3</title> 

006 clink rel ^'stylesheet” type=”text/css ** 

href-"styles/screen,css” /> 

007 </head> 

008 <body> 

009 <div id= rf container’^ 

010 <ul id=”nav”> 

Apply a stylesheet 

You may have noticed that we've called in an 
external stylesheet, named styles, from a sub-folder. We 
need to create that stylesheet now. so open a new 
blank document and save it as 'screen.css’ inside a 
sub-folder called 'styles' to match. Paste in the code - 
which is in full on the CD - to set the main page rules; 

001 /* Advanced navigation effects with C5S3 

*/t 

002 body { 

003 background: tdedede; 

004 font-size: 62.5%; 

005 font-family:verdana, helvetica, 

arial r sans-serif; 

006 > 

007 Container { 

008 width; 960px; 

009 position: relative; 

Make a basic rollover 

Part of fundamental user experience design is 
providing feedback when visitors interact with elements 
on your page. A classic example of this is the humble 
rollover, and it's on top of this core functionality that 
we'H be building all our effects here. Start off by adding 
the CSS code below to create a simple rollover that just 
swaps the background colour. 

001 gl#nav li; hover { 

002 background: #dcebeb ; 

003 z-index: 1000; 

004 ) 

Add some CSS3 

One of th e best th mgs about the proposed CSS3 
properties is the ability to transform elements in scale. 
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Cutting-edge navigation effects with CSS3 alone I 


view VQtm rAVOUWTCS 


edit vm* EerriSo! 


Favourite 

* Personal 

CHANGE KMJR DCTAllJ 

m Feedback 

vi ew voi*, comments 

A Alerts 

hrumuu Total Aleuts 


Favourite 

ntn Tfc# 

Settings 

UNI iOl*ltllK£ 


Personal 

Murit r*u* Dcr.'ij 


Feedback 


Alerts 


Settings 

int tplm *rt-tiMC* 

Personal 

Feedback 

VtlWH 


Alerts 


Favourite 

Settings 

Personal 

Feedback 

*i*iA»«***vn 

Alerts 


-(Left, left turf gtit* 

•■CS53 has provided u & with the ability to 
play with style propertied such as scale 
a rid here we can see the result of 
making each item swell on rollover 
-With the basic navigation menu In 
working order we can create the rest of 
the container pagewlththe CSS3 
needed to form the content area styling 
cAhuve, left to rights 
-The linal shot illustrates aur navigation 
element finished and working, although 
you can use this as a launch pad for 
further effects and visual twea ks to give 
it that f I nal touch of class 
* After ca il ing l n an external stylesheet 
called styles’, well create lhat .css lile 
from the code found on the CD and set 
the main page rules required to get 
started on our element 


/ 


Convert your 
graphics to CSS 

For automatically 
converting a graphic into a 
format you can embed in 
your stylesheet check out 
this tool: http://tinvurl. 
com/uriconvertor. J 




I position or 
relation. Let's 
( add a bit of 
scale to our 
' rollover so that, 
as we hover our 
mouse over the list 
item, it pets a little bigger 
and also gains a drop shadow. The end result should be 
an apparent 'lifting' off the page. (We've only used the - 
webkiL browser prefix, but this will also work with -ms- 
and -moz-for IE and Firefox. respectively.) 

001 ulflnav lirhawer { 

002 backgrgund; #dcebeb ; 

003 -webkit-transform; translateV(-3px) 

scale(1.05); 

004 -webklt-box-shadow: 0px 2px 7px 

#999; 

005 box-shadow: ftp* 2px 7px fr999; 

006 z-index: 1000; 

007 > 


05 


Makeit5mooth 

As well as fancy new transformation effects, 
CSS3 enables us to automatically create animations 
between two different states for an element We set this 
up using the transition property and specify which 
elements to animate, over what period of time the 
animation should take place, and which animation 
speed to apply, Add the code below to the u!#nav li 
selector to create an auto animation: 

001 -webkit-transition: all 0,15s linear; 

A little more setup 

’■k We've got a basic navigation menu working 
nicely now, so let's get the rest of the page set up 
before we move on to more advanced CSS3 properties 
and animations. Add the CSS below to create the 
content area styling and set the remainder of the page 
up to match the main design. The full code is on the CD. 


003 

width; 5$0px; 


004 

height; 

477px; 

005 

float: left; 


006 

border: 

2px solid #cfc 

007 

background: #fefefe; 

008 

-webkit-box-shadow: 0px 0px 4px 


#ccc; 


009 

box-shadow; 9px 

0px 4px #ccc; 

010 

} 


011 

div#sma11panel { 


012 

margin; 

0 lpx; 

013 

width: 60px; 


014 

height: 

477px; 

07 

Get in a spin 



001 div#panel ( 

002 margin; 


0 Ipx; 


The panels are looking great but the title found 
within the small box isnl fitting correctly right now. We 
need to rotate the text through 90 degrees so that it 
reads vertically. Luckily we can do this using CSSS once 
more. Again, the transform property lets us take control 
and position the heading as required. Change your CSS 
so that it reads as the following: 
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<hitorials> 



+ Favourite 

** view rfrijfl nwounrres 



Settings 

~ corr rot* 5ETTHM5 



• Personal 

LhUVlGfc TtlLIk UfclAJli 



• Feedback 

VIEW YOUR COMMENTS 

A Alerts 

JUk PcHSDTCUUiE rout? AliRTS 




* 

EDIT YOUR SETTINGS 

IjL 

Personal 

CHANGE YOUR DETAILS 



<Abova> 

- Here wti hav& uud C SSI to rescale and reposition each icon in the 
navigation on rollover In order to create a menu that immediately 
feels both more interactive and sophisticated 

* Keep things consistent by applying tne sllde-ln effect to the button 
text;C553 has enough power to handle all your animations at once 

anight* 

* By all means be creative with the icons, but make sure that they're 
di stl net on a small scale a nd also that they bea r same re leva nee to 
the category tney are representing for instant recognition 


★ 

Favourite 

VIEW VOUft FAVOURITES 


Settings 

eCHTTOUft SETTEKS 

X 

Personal 

CHAKCE YCUfl CCTA1LS 

• 

Feedback 

VIEW VOIH COMMENTS 

A 

Alerts 

PERSONALISE TOUR ALERTS 


001 

#sim 11 panel h3 ( 

001 

@fcnt~face{ 

002 

width: 477px; 

002 

font-family: 1 WebSymbolsRegula r k ; 

003 

margin: 0; 

003 

sre: url( f fonts/websymbols-regular- 

004 

padding: 0; 


webfonf. eot d ); 

005 

font-size: Bern; 

004 

$fc: url( £ fonts/websyfnboIs- 

006 

display: block; 


regvila r-webfon t r eot?#ief i x 1 ) 

007 

text-transfo rm; capi tal i ze; 


format ( 1 embedded-opentype’) p 

006 

color: #Bfaabd; 

005 

u ri { f fonts/websymbols - regula r- 

009 

color: rgba(255 f 255 f 255,0.5); 


webfont.woff’) format^ J woff 7 ), 

010 

font-weight:normal; 

006 

url{* Ton ts /websymbol s-regula r- 

011 

-webkit-transform-origin: 0 0; 


webfont. ttf’) format C' t ruetype r ), 

012 

-webkit-transform: rotate(90deg) 

007 

u rl( £ fon ts/websymbols-regula r- 

translateY{-60px) translateX(20px); 


webf ont. svgUfttfebSynbol sRegu Lar 5 format{ ' svg ’ ); 

013 

-webkit-transition: all 0,3s linear; 

008 

} 

014 

015 

cursor: pointer; 

} 

in 

Pick your icons 

08 

Add some vector graphics 

Now we’ve got the font installed we can add an 

icon to the start of each list item. Add a <div> with a 

We thought that it could be good to add some 

class of icon before each tag in the navigation list 




Iconic fonts 

We've used a special font 
to render the icons on our 
buttons in this guide. You 
can download the same 
one for free at www. 
j u st b e n i cestu d i o.com/ 
studio/websvmbols 


k 


details</ 
spanx/ax/li> < 

Experiment 

You'll notice that in our 
example code we've chosen 
some letters to act as the content for our icon <div>5. 
Each letter displays a different icon when rendered in 
the Web Symbols font, so it's worth testing your page 
and experimenting with various letters to find a pictonal 
character that best matches your button. 
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visual icons that represent the different sections of our 
menu, but if we render standard JPEG, PNG or GIF files 
out. they"II loo k a little soft as we scale them up when 
moving a mouse over the list item. Instead, we can use 
a web font to render icons which act like vectors but 
can scale to any size while also remaining sharp. Have a 
browse at my_w.jusIbeiiLcestudloxom/sJudjo^ 
Mfibaymb.oia.for a suitable font, 


and then add the CSS code below to assign the Web 
Symbols font to the .icon class. Full code is on the disc. 


09 


Download and install 


Download the Web Symbols font {or something 
similar) from the site mentioned in the previous step 
and install it into your page by adding the step code to 
the top of your stylesheet. This imports the font into the 
page, enabling us to apply it to individual elements as if 
it were any other typeface in common use. 
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001 
00 2 
003 


004 


005 


<! — HTML > 

<ul id=’'nav”> 

<lixdiv elass=”icorT>R</ 
divXa href=”#" title= pt Click here 
for. „ .”xh4>Favaurite</h4> <span>View your 
fa vou r 1 tesc/spanX,/a ></ 1 i > 

<lixdiv class= ld icon”>S</ 
divxa href=”# ,r title-"Click here 
for., .”xh4>Settings</h4> <span>Edit your 
settings</spanx/ax/li> 

<lixdiv el3ss=”icon”>U</ 
divXa href=”#" title=”Click here 
for. r , dJ Xh4>PersQnal</h4> <5part>Change- your 


Animate the icon 

When the list item is rolled over we use CSS3 to 
scale it up and the transition property to animate that 
automatically. Let’s do the same thing for the icon. By 
adding an animation to the icon as well as the list item, 
the icon will be subjected to two animations; one as a 
child of the list item and another as an icon. The result 
is a more complex-looking animation that looks less 
mechanical. Insert the CSS below: 

001 ul#nav li:hover .icon { 

002 -webkit-transform: scale(1.5); 

003 color: flb74S0c; 

004 } 
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Take advantage of CSS3 

Notice that we animated the scale of the icon so 
that it grows far more than the rest of the button, and 
also the colour. CSS3 is happy animating any CSS 
property for you, so you can achieve a nice smooth 
transition without any complex scripting required! 
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Predefined animations 

Sometimes it can be really useful to be able to 
specify a starting position and an ending position for an 
animation instead of just the starting and ending states. 
This enables us to have an animation launch from a set 
of properties other than the standard default. Just add 
in the code below to your stylesheet in order to create a 
preset animation: 


001 @-webkit-keyframes slideFrcmTop { 

002 from { 

003- opacity: 0; 

004 -webkit-fransform: 

transiateV(-200%); 

005 } 

006 to { 

007 opacity: 1; 

008 -webkit-transform; translateY £0%); 

009 } 

010 } 

What does that do? 

^ ^ The code wo just added in step 14 doesn't do 
anything by itself - however if we apply the animation 
to the :hover state of an element when we move our 
mouse over that element, the style will animate 
between being transparent - and 200% of the height 
above the element bounds - to being opaque and in 
the normal position. Add the following code to see this 
In action: once again, the complete code that you'll 
need can be found on the cover disc. 


001 

ul#nav 11 a h4 { 


002 

inargin: 

0; 

003 

padding: 

0; 

004 

font-size: 

3«n; 

005 

display: 

block; 

006 

text-transform:capitalize; 

007 

fon t-wei ght; normal; 

00S 

> 



Test and repeat 

What we’ve just set up is a n ani mation that 
applies to the <h4> element inside each list item. When 
you mouse over the item, the heading disappears and 
slides back into view. We can repeat this trick for the 
other element within our buttons. Add the code below 
to set up the animation preset: 

001 @-webkit-keyfrairtes slideFromRight { 

002 from { 

003 opacity: 0; 

004 -webkit-transform; 

translate*(200%); 

005 } 

006 to { 

007 opacity: 1; 

00S -webkit-transform: translate*(0%); 

009 } 

010 > 


Cross-browser friendly 

Now we've got two different animation presets 
completed. Before we add the second preset to the text 
of the button, let's bring the other browsers up to speed 
by adding support with their own vendor prefixes. Add 
the code below to duplicate the animation presets for 
other non-WebKit browsers. The full code is on the CD. 


001 0-webkit-keyframes slideFromTop { 
002 from { 

003 opacity; 0; 

004 -webkit*-transfonn: 

translateVC-200%); 

005 } 

006 to { 


Keep things consistent 

Now that's in place, let's add the effect to the 
text. This works in exactly the same way as with the 
<h4> we saw a few steps back - we simply add the call 
to the preset and, when the user moves their cursor 
over the di>. four animations in total will be called 
simultaneously. Find the full code on the cover disc. 


001 

ul#nav li a h4 { 


002 

margin; 

0; 

003 

padding: 

0; 

004 

font-size: 

3em; 

005 

display: 

block; 

006 

tex t-1 ran sfo nm:capitalize; 

007 

fon t-weight:normal; 

008 

} 


# 

Make some noise 

The final few flourishes we need to set i 


off to best effect are pretty basic but still worth having a 
close look at. First of all, the page feels quite clinical and 
fiat now - it would be great to have some texture in the 
background, but not at the expense of download speed. 
Start off by creating a repeating textured background 
inside your favourite image editor Cor. for convenience, 
grab ours from Texture graphics' on the disc). 


Convert and deploy 

Rather than include this image as an external 
reference as you would normally we can embed it 
directly into the CSS. saving an extra call to the server 
and increasing rendering speed. Navigate to http:// 
tiryurUorn/uri convertor and upload your image to 
convert it to base€i4 code: copy this to your clipboard. 


Paste ’n’ go 

Now you've got your base64 code, we need to 
apply it as a background image to the desired element 
We r ve chosen to place our texture on the page 
background, so add the following step code (available in 
full on the CD) to your existing body {} CSS rules to 
apply the texture. Note that your base64 code may be 
slightly different to ours depending upon the texture 
graphic that you chose to upload. 


001 body { 

002 background: #dedede 

ur 1 (da to: image/ j peg; bas e64 r /9 j /,„) 

003 repeat top left; 

004 font-size; 62.5%; 

005 font-family:verdana f Helvetica f arial, 

sans-serif; 

006 } 

22 Polish and test 

' Finish the page off by applying another texture 
to the small panel, an icon and an animation for the 
position and text shadow of the <h3> within. You should 
be able to do this without our help, but we've included 
the necessary code on the CD Just In case you're not 
sure. Once done, test the menu in your browser and 
then just wallow in the CSS3 greatness! 



Why embed images in 
your CSS stylesheets? 


Back in the Nineties, when the web 
was only just starting to take off, 
bandwidth was a] I important. Website 
visitors were likely to be connecting 
by dial-up modem and so every 
aspect of a webpage needed to be 
carefully tailored to minimise 
download time. 

While we've moved away from this 
extreme, it's still important to optimise 
your code to reduce the number of 
calls to the server and speed up page 
rendering - especially now that 
mobile ts seriously taking oft 

One way you can do this is to avoid 
rendering your background graphics 
in separate fi les. Each file adds server 
(and browser) overhead, so by opting 
to integrate the small background 
graphics that add a repeating Image, 
noise or texture to your page, you can 
reduce the number of server calls and, 
as a result, speed up the overall 
performance of your page. 
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BrowserlD into 
your website 

Discover how this authentication 
framework is revolutionising logging in, 
doing away with user input fields 

tools I tecli I trends Dreamweaver, PHR MySQL. JavaScript 
expert Pete Simmons 



ruwserlD Is Manilla Labs' latest 
authentication framework. 

:Rather than reiving on usernames 
irjriiji" and passwords for each website, 

BrowserlD is able to tog a user in 
to all Browser I ^supported sites a 
user visits based on an email 
address and a master password. 

From a security perspective, 
this is a massive bonus. With 
BrowserlD, you no longer have to rely on a site keeping 
your password safe; you have one password saved with 
BrowserlD which is never submitted anywhere else. It 
also allows you to add multiple email addresses so you 
can combine all your accounts into one log-ln system. 

In this tutorial we reveal how to implement BrowserlD 
into your site. Once it's up and running, we access a 
user's email address from their BrowserlD sign-in and 
then offer the ability to save and retrieve data. We'll be 
using RHF. so you’ll need a development server with the 
most recent version of PHP/MySQL or the latest version 
of XAWPP/WAMP installed as a localhost server. 


tfciatieiiK 


LOG lit BELOW 


<AIhw«> 

* 0 u r CSS styled log-in screen, comp lete 
with Browser ID Submit button. Unsightly 
user Input fields are no longer required 


Set up your account 

Before we get into any coding, it's probably a 
good idea to set up your BrowserlD account. Navigate 
to www.browserid.org a nd c ick on the Sign Up button. 
Enter your email address then click the Verify Email 
option. Open up the email from BrowserlD and dick the 
verification link. From here you will be prompted to 
provide your master password, 

Build the login 

The first step is to create an HTML log-in page 
that has a form and all the required BrowserlD 
dependencies, Open up the template file from the disc 
and add the following line to the head section of the 
HTML file. Save this page out as index.htmL this will add 
the BrowserlD library into your document, 

001 <script srcs J, ht bpsr//browser id.org/ include, 
j s Jl type= “ tex t/ j ava scr i pt' "></ sc ri pt> 

Addtheform 

Place the following code underneath your hi 
tag; this will add a simple BrowsedD-enabled log-in 
form. The form itself contains no user inputs, just a 
dean and simple Submit button. This button will call the 
BrowserlD JavaScript code that we'll be adding in the 
next step. The Submit button has been styled via CSS 
to show the BrowserlD icon. 

@01 chl>Log In Belcw</hl> 

002 <form actio«nF"login.php" 

me thod=* post" i d- 1 browse ri d_f orirF 
onSubmit= "return browserlDQ; w > 

003 <input types"hidden" 

name= "assertion" value= J,,J id="browserid_ 
assertion" 1 /> 


004 cinput type='"submit' 1 

valuer "Submits 
005 </form> 

BrowserlD JavaScript 

Now we have our form in place we need to add 
the JavaScript that gets called once the form is 
submitted. Add this code just before the dosing </head> 
tag. This code makes a call to the BrowserlD library and 
passes over the user's assertion value. There is also a 
level of error checking in place here. 

001 <script type= J 'text/javascript"> 

@02 <!— 

@03 function browserID{) 

004 { 

005 navigator.id.getVerifiedEmail(function(asse 
rtion) £ 

006 if (assertion) { 

007 documen t.getElementById( J b rowse rid_ 

assertion').value - assertion; 

@08 document.getElementById( 'browse rid, 
form') ,submit{) ; 

009 } else { 

010 alert ('Could not complete 

identification'); 

011 } 

*12 )3; 

@13 return false; 

@14 } 

015 --> 

016 </script> 

Test your index.html 

Our index page is now complete, if you run it. 
you'll be able to see the BrowserlD script in action. 






54 


LuLcrlals 









































I 


<tntorials> 


Integrate BrowserlD into your website I 



<Topt»hoLlom> 

• With our class Tlnished 
on the login,php page, 
we can now display tl>e 
user's email address In 
the header 

- Thepage now contains 
an update form .whlchi 
will send the updated 
field data Quito the 
MySQL database 


Clicking the Sign in button will produce a pop-up dialog 
that prompts a user for their credentials, Unfortunately 
we don't have our log in .php page created yet so the 
script doesn't do anything. 

Create the login.php page 

In this step we'll be creating a new PHP 
document and adding our Browser!D class to it. The 
same outcome can be completed with individual 
functions, but classes are much neater, Add the 
following code to a new PHP document and save it 
as 'login.php'; these will be our class variables that 
get values assigned to them later. 

001 <?php 
002 

003- class Browser ID 

004 { 

005 private (audience; 

006 private (assertion; 

007 private (email; 

The first function 

^ Well now add our first function to our class. Add 
the following code below that from the previous step. 
This code forms the data sent from index.html correctly, 
ready to be sent over to BrowseriD and verified. This 
function uses fopen; you can use cUftL if you prefer, 
but it may work out slightly more complicated, 

001 { 

002 (pararns = array('http' => array("method 1 

=> 'POST' f 'content' => (data)); 

005 (ctx = streairLcontext.createCJparams); 
004 Sfp - fcpen($url, 'rb\ false, $ctx); 

005 if (Sfp) 

006 { 

007 return 5tredm_get_contents((fp); 


008 } 

009 else 

010 { 

011 return false; 

012 } 

013 } 

Verifying data 

This next section of code will do the verification 
needed to obtain data from BrowseriD, It takes the data 
formed from the code in the previous step and passes 
the URL needed to get the JSON data from BrowseriD. 
This data is then decoded and verified. We now have a 
user's email address from BrowseriD. 

001 public function verify.assertion() 

002 { 

003 (parameters s http_build_ 

query(array('assertion f -> $this->assertion f 

'audience' -> $this->audience))■ 

004 (result = json_decode($this->post_ 

request('https://browserid.org/verify'„ 
(parameters)„ true, 2); 

005 if(isset((result[ 'status']) && 

tresultf status'] == 'okay') 

006 { 

007 (this->email = (result!'email']; 

008 return true; 

009 } 

010 else 

011 { 

012 return false; 

013 ) 

014 > 

Finish the class 

The last step in our class is to add two more 
functions; these functions will assign the user's verified 


data to an object we can use outside of the class. Add 
the following lines of code after the previous step, 
ensuring you close off the class with a curly bracket, 

001 public function Browser ID ((audience, 
(assertion) 

002 { 

003 (this->audience = (audience; 

004 (thi ^assertion = (assertion; 

005 } 

006 

007 public function get_email() 

008 { 

009 return $this->email; 

010 } 

011 
012 > 

013 
014 ?> 

Using our class 

W Now our class is completed it's time to use it. 
Open up classjempiate.php' from the CD; this has our 
CSS and HTML template added to our class file, Save 
this out as login.php'and add the following code under 
the £bGdy> tag. This will make a call to the BrowsedD 
class and return the email address of the user, 
displaying an error if this fails for some reason. 

001 <? 

002 (browserid = new BrowserID($_ 

SE R VER['HTTPJH05T r ], (.POST['assertion']); 

003 

004 if((browserid->verify_a sse rtion()) 

005 { 

006 echo('<h2>Vfeleome '.(browserid->get_ 

emailO- '</h 2 >'); 

007 } 

008 else 
009 { 

010 echo('<h?>Log In Failed</h2>'); 

011 } 

012 

013 ?> 

Re-authenticating a user 

Our code is working pretty well at the moment 
but we need a way of re-authenticating a user, if they 
get logged out. To do this we need to make a call to our 
class on the page load. Add the following code 
underneath your class to redirect a user back to the 
index page if they get logged out, 

001 (browserid = new BrowserED($_ 

SERVER[' HTTP.HOST'], (_POST['assertion']); 

002 

003 if((browserid->ve rify_assertion()) 

004 

00 B { 

006 (email = (browserid->Eet_email(); 
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007 } 

@@8 else 
009 { 

@10 header{/Location: index.html'); 

@11 1 

Using the data 

You may have noticed in the previous step that 
we have now assigned the user's email address to the 
variable $ema il so our welcome message can now be 
changed to the following code. The next step is to set 
up a MySQL database and add data that we can 
retrieve based on an authenticated user email address. 

@01 <h2>Welcame <?= $email; ?x/h2> 

Set up MySQL 

Using your MySQL admin panel, create a new 
database. Once you have your database in place, run 
the following SQL command to generate a new table 
complete with fields. We will then add values to this 
through our frontend. 

001 CREATE TABLE 'userdata 1 ( 

@@2 1 email v VARCHAR( 255 ) NOT NULL } 

@03 'name' VARCHAR( 255 ) NOT NULL , 

@04 * console' VARCHAR( 12 ) NOT NULL s 

005 PRIMARY KEY ( ‘email 1 ) 

006 ) ENGIlt = MVISAM ; 

Data entry form 

The next th ing to do is to add a tor m to our 
login.php page that enables users to enter data into the 
new database. This form will be the only thing shown to 
users who visit the site for the first time; for existing 
users the form will be used as a means of updating this 
content. Add the code below in the box2 div : 

@01 <forn action-'update,php" 

method-" pos t Jf cl ass- "gene ral ,f > 

002 <input type=”hidden" name^ 1 "email" 

value=”<?= lemail- ?>” /> results element 
003 <input type= J 'hidden" 

name= "assertion"' value="<?= $_ 

POST ['assertion' ]; 7>” /> 

004 Clabel for= r ‘name''>Mame</label> 

@05 <Tnput type=”text" name^'name" 

value=”" class-'form-input' 1 /> 

@06 <label for-'console">Choose 

Console</label> 

007 <div clas$="select-wrapper "> 

@08 <select name= J ‘ con sole " required> 

@09 ^option value=”Xbox 36@">Xbox 

360<,/option> 

010 <option value=”PS 3 ">P5 3</opt i on> 

@ 11 <opt Ion value=”Wi 1 ”>iYi i</opt i on> 

012 <option value= J, Nintendo 

DS''>Nintendo D3</option> 

@13 </select> 

014 </div> 


015 <input class^'fonni-btn" 

type="submit” value= r ‘Submit Form'' /> 

016 </fonn> 

Update the database 

Now we have our form in place, we need to 
create a RHP file that will update the contents of the 
database, and then push the user back to the login.php 
page and display the amended data. Create a new PHP 
file, add the following code and save this out as update. 
php 1 . You will need to add your own database details. 

@01 <?php 

002 Icon = mysql_connect( J, localhost"\"username” 
K "password”)■ 

003 if (J$con) 

004 { 

005 die('Could not connect: 1 . mysql_ 

errorQ); 

006 } 

007 

008 mysql_aelect_db("BrowserlD" „ $con); 

@09 

010 mysql.queryC"REPLACE INTO userdata 
YALUES('”,S_P05T['emai1 1 ],*”, "•,$_ 

POSTL' name f ], " f ,' ". $_PQST[ J console' ]/")"); 

011 mysql_close(Scon); 

012 

013 header(‘Location: login.php J ); 

014 7> 

Persistent login 

Something you may notice now is that we get 
thrown back to our index.html page: the reason for this 
is because we are not passing the correct variable back 
to the login.php page. Add the following code at the 
end of the update.php file, outside of the PHP brackets. 
This will send all the correct data back to the login.php 
in the form of a POST. 

001 <form action='login.php' method='post' 
name='fornn r > 

002 <?php 

003 foreach ($_P0ST as $a => 3b) { 

004 echo "<input type= ‘hidden J name=' J ‘.$a."' 
value="', $b,” 

005 } 

006 ?> 

007 </fornrt> 

008 <script language= J 'JavaScript J '> 

00 9 dociMien t. form. submi t Q; 

010 </script> 


Display existing data 

F So now we are updating our data correctly, we 
need to display it on the login.php page, Add this set of 
code within your boxl div as an hi tag. This code pulls 
the information from the database and presents it on 
your page. Aga»n you will need to replace elements of 
this code with your own database details. 

001 <?php 

@02 Scon = mysql.connect("localhost”,"us 

ername"."password"); 

003 if (!$con) 

004 { 

005 die('Could not connect: ' . mysql_ 

errorQ); 

@06 > 

@07 

@08 riysql_select_db('browserlD w , Soon); 

@09 

010 Sresult - imysql_query("SELECT * FROM 

userdata WfERE email='".$email. M<tt ) ; 

@11 

012 while($row = ny$ql_fetdh_ 

array($result)) 

013 { 

014 echo ”<hl>Welco(ne ".$row['name']. 

" your console of choice is M .Srow['console'], 
"</hl>"; 

015 ) 

016 

@17 mysql_close($con); 

018 1> 

Finish with an if statement 

So now the page is pulling out data from the 
database and displaying it alongside our update form. 
The following code will ensure the user has completed 
the fields required: if not. it will display a prompt to do 
so. Add this code around step 17‘s while statement. 

001 if ( ! mysql_num_row5(Sresult)) ( 

002 echo '<hl>Plea.se cofrplete the 

form to the right</hl>'; 

003 } else { 

004 while($row = mysql_fetch_ 

array(Sresult)) 

005 { 

006 echo ”<hl>Welcome ".Srow['name']. 

" your console of choice is rt .$row['console']. 
"</hl>"; 

007 ) 

008 } 


The next thing to do is to add a form 
to the login.php page that enables users 
to enter data into the new database 
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Produce 
interactive 
animations 
with Edge 

As Adobe's new HTML animation tool 
evolves, we examine the latest features 

tools I tecli I trends Adobe Edge Preview 
expert Mark Shufflebottom 



Eg 

;S 







s Flash has row been 
scrapped as a plug-in for 
mobile devices, and as 
more clients demand 
solutions that cross 
platforms and differing 
screen sizes, the Adobe 
Edge team has been 
really ramping up the 
capabilities of what the 

animation program can offer, Indeed, the latest version 
has added the option of interactivity via a scripting 
panel. There are scripts already built in. so it's easy to 
use as is. but just like with ActlonScript, if you know how 
to code yourself, you can add a lot more functionality. 
This is done either with native JavaScript or by using 
jQuery as Edge harnesses this plug-in to power it. 

Admittedly, there are still some issues with Edge at 
the moment For example, it still doesn't add content as 
dsvs to the document and it doesn't offer options to 
publish to Canvas, but it is improving as a tool and will 
make a valuable addition to any designer's toolkit- 




On the Edge 

Vasit httpV/labs.adobe.comj't&chnologies/edq^ a-id download 
the latest edition of Edge. You will need to uninstall previous versions 
before installing the new iteration. From the cover CD copy over the 
Start folder to the desktop and then launch the Adobe Edge software, 


Edge now offers the option of 
interactivity via a scripting panel 

■ With mobile Flash s-ites an the way out, 
Adobe is keen to Tl ll the big gap that the 
animation app will leave with Edge 





0 2 Create a new document 

Click on the 'Create new document' ioon when 
Edge starts up. Change the stage dimensions to 960 x 
SOOpx, set die Overflow to Hidden and name the 
stage 'slides'. Set the stage colour to black as well. 

Now save the project as 'slides' in the Start folder 
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Import images 

Go to the File menu and choose Import. Browse 
to the image folder located inside the Start folder. Now 
select the first image and Shift'd id? the last image to 
select them all before hutting the Open button. The four 
images will appear stacked on the stage and you can 
see the order in the Elements panel. 




Organise the images 

l n the Elements panel sort the 
images from the lowest to the highest so 
that they are ordered 'edge", 'motion', 
■graphic' and 'design'. -Click on the word 
itself to drag and then let go of each 
between layers, otherwise it will jump 
back to its original position. 



Start the animation 

Turn off the visibility of all layers except edge in the Elements 
panel. With the edge layer selected you can now turn down the 
Opacity to 0% In the Layer properties. Next move the playhead to 
0.5 seconds in and then bump up the Opacity to 100%. You should 
see the animation appear on the timeline. 




Movethe mark 

Move the playhead to four 
seconds now and then separate the 
'mark' (the little arrow that's located 
below the playhead) by repositioning it 
to 3.5 seconds on the timeline. Next you 
will need to change the Opacity to 0% 
and you will see the animation take 
effect from the mark position to the 
playhead position. 


Repeat the animation 




Set the labels 


Turn on the visibility of the graphic layer and 
select it. Paste the animation in, then do the same for 
the last design layer. Your animation should now 
resemble the timeline shown in the screenshot below. 
You can preview it by pressing the 'play' icon or by- 
hitting Cmd/Ctrl+Retum to see it in the browser. 


Place the playhead at frame 0 before going to 
the Timeline tab and selecting Insert Label. Name the 
label 'edge' Repeat this simple process for 4,8 and 12 
seconds, naming the labels 'motion', "graphic'and 
"design 1 , respectively, for each of the labels that 
correspond to each section. 



Launch a URL 



01 _Select a button 


To launch a new URL in the browser select 
a button on the stage and, in the Elements 
panel, click on t he 'script' icon. Ma ke Clic k 
the action and hit the Open URL button. 



02 _Change the URL 

In the code that appears in that window 
just add the URL for the but ton that you 
wish to launch by replacing the default 
Adobe URL with your own. 



03 _Pull the trigger 


Alternatively you can do the same 
command, but rather than a button use a 
timeline trigger instead. Just select the 
frame and go to Timeline>Insert Trigger. 
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I Produce interactive animations with Edge 


Loop the timeline 

press Cmd/CtrhReturn to preview in the browser and you will 
see that the timeline doesn't loop. Go back into Edge and move the 
playhead to the last frame. Select Timeli reinsert Trigger. In the popup 



Add a rectangle 

Turn off the auto keyframing (the red stopwatch 
icon above the timeline). Next dick on the Rectangle 
tool and draw out a shape. In the Properties panel make 
it 28Dpx wide by 300px high and position it at 68Gpx 
on the X axis. Allocate black as the colour of the 
rectangle and set the Opacity to 50%. 




Write the text 

"wr Next, use the Text tool to add two text areas. 
Change font colour to white at 24px in size (for headers) 
and 18px for other text. Add writing as shown in the 
screenshot for each hit, In the Elements panel name the 
heading 'Edge’ and the description text, which is the 
smaller qualifier beneath, 'description! 



Interactivity in Edge 
under the microscope 


Without Flash on mobile devices, 
Adobe is left trying to find solutions 
for Its customers for creating 
cross-platform Interactive animatlon. 

You may wonder why this is so 
important and the main reason is: 
banner ads. With this in mind It sort of 
explains the Edge team's decision not 
to include content for the stage In the 
document, because this means as 
adverts are stripped in and out of 
pages It Is as simple as changing the 
supporting assets which would be 
much like changing a SWF. 

As most banner ads ate calls-to- 
action there usually needs to be some 
form of interactivity with the user to 
take them to another site. For this a 
simple link will suffice in the vast 
majority of cases, however In other 
instances more interactivity Is 
required so the use of JavaScript and 
IQuery Is added which can be run by 
the relevant browser. 



jQuery is king 

As Edge uses jQuery as its 
code base you can add any 
command in from jQuery, 
such as those that change 
CSS properties, or even 
regular JavaScript. 


Copy the text 


Copy these two text areas and paste them three 
times, positioning each on the right of the display as 
shown, Once in place change the text as per the final 
image, Then, in the Elements panel rename the divs to 
'Motion'. Graphic' and 'Design' for the headings 
accordingly with the descriptions to be numbered 2-4. 


i w i. - ». i 


Save and test 


Npw is a good time to save and test the 
animation so far, At present there is no functionality in 
the animation other than for it to play in a linear fashion. 
We are going to change that by adding interactivty. 
Select the Edge text and. in the Elements panel, dick 
on the 'script' icon. 


* - ^ * fi 




event and type in this code. Sfthis, 
looku pSe I ectorCEdg e'D.cssCcu rsor', 
'pointer');. This means that when the 
mouse is over to is element the cursor 
changes to a pointer. Notice it only 
changes when over the Edge div. 
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Produce interactive animations with Edge I 


Control the click 

Now press the 'plus' icon that's positioned in the top-left of the 
panel and choose Click, Select the ‘Go to and play' button then change 
the Time to the edge label as demonstrated in the screengrab; this 
means it will send the playhead to this frame label that we added back 
in step 9 whenever we click on this div. 



Repeat the code 

Repeat steps 15 and 16 for the other headings, 
Remember to change the divs to motion', 'graphic' and 
design' for the CSS. The labels should also point to 
^motion', 'graphic' and 'design' for each Go to and play 1 
command. You can now test all this in the browser. 




Highlight time 

Click on the word 'Edge' on the 
screen and activate the auto keyframmg, 
Select 0.5 seconds on the timeline and 
change the colour to yellow. Move the 
mark to 35 seconds and the playhead to 
four seconds then change the text 
colour back to white to make it 
highlighted in this section. 


Copy and paste animation 

Select the first section of animation then 
Shift-click the second and copy it. Click on each of the 
titles in turn and paste the animation and they should 
appear at the end of the current playhead position 
which is exactly where we want them. 



Save your work 

Now is a good time to save your work as most of 
the interactivity and colour effects are in. Just hit the 
'play' button on the timeline to ensure the coloured 
effect of the buttons is working: this should have the 
word turning yellow as the image changes. 



Test in the browser 

Hit Cmd/Ctrl+Return to test your work in the 
browser. As you can see the app is showing a lot of 
promise with work that could previously only be done 
in Flash now being offloaded to HTML. Now you can 
easily make custom animations with interactivity that 
are compatible across all modem devices, 
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| Open a feature-rich eShop using WordPress 


Open a 
feature-rich 
eShop using 
WordPress 

Online stores have never been easier 
thanks to WP and WooCommerce 

tools I tecli I trends WordPress. WooCommerce (plug-in). Wootique 
(theme), web browser expert James Koster 



rade Is one of our most 
ancient behaviours, with 
records of long-distance 
commerce dating bach 
over 150.000 years. It's 
safe to say we’ve come 
a long way since our 
ancestors began bartering 
goods and services in a 
crowded marketplace. 

Truly some of our most significant advances in 
commerce have taken place in the last decade or so. 
With the web becoming ewer-more ubiquitous, we're 
able to do more and more of our business from the 
comfort of our own homes. You can order next week's 
groceries, pav vour bills and purchase some presents in 
less time than it takes to even get to the physical shops. 

Whatever you're aiming to sell online, this guide takes 
you through the steps necessary to open a slick store 
on the greatest marketplace known to man: the web. 
With WordPress as our base, we'll use the handy 
WooCommerce plug-in to streamline the process. 


Wootique 


IT 0 Iwmi - to 


Welcome 

wociiiqut is t fitKibit, highly customisable *Comin#rt* thtmt for WordPress. Bout due has been 
designed from the ground up to tak* tdvantag* of »H of WaoCofnm*rc* t * cor* f*iturs*. whilst 
delivering fantastic custornisabdity. Would you believe Wootique is a free theme available for 
download? 


Featured Products 

■j U 


Shopping Cart 

Recent Products 



Were able to do more and more of 
our business from our own homes i 






Lay the groundwork 

™ There's a huge number of things to think about 
when setting up an online stone which, in fact, could be 
a tutorial on its own. But some key areas to consider ana 
choosing an appropriate payment provider (such as 
Pay pal. above); deciding on shipping terms/costs; 
getting to grips with tax; deciding if you want to track an 
inventory; and puttting security measures in place. 


Prepare your content 

''*3' The next important step in the preparation 
process is to organise your content. Write your terms, 
shipping and returns policies, gather your product 
descriptions and data, assign them SKUs, decide on 
your product categories/attribute sets, think about 
possible product tags and choose some appropriate 
dimensions for your raw product imagery. 
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Open a feature-rich eShop using WordPress I 


03 


Social 

strategy 


Social media has become a 
massively popular marketing 
tool for on line stores. Think 
about which email- 
marketing software might 
be suitable for your eShop 
and register an appropriate 
Twitter ID. With 
WooCommerce it's even 
possible to integrate with 
Ratebook, the Google 
product feed and some 
message providers to deliver 
order updates via SMS. 



Download and Install WordPress 

With the prep done it's now time to embark on Word Press's 
'five-minute installation' process. Pay careful attention to assuring 
you set up your secure keys and salts as security is of paramount 
importance on an eCommerce website. Also consider allocating a 
little extra memory to php (httpi//tiny url.com tohpmemor y). w t- ich 
will probably be a must if you're building a larger stone 


Install WooCommerce 

Yoy can install WooCommerce from the WP admin panel or 
download it from the Word Press nm n lun-in repository It's a good idea 
to register at www.woothemes.com/woQCom merce too: this gives 
you access to the documentation and snippet library, as well as 
subscribing you to the newsletter. Once you activate WooCommerce. 
pick the option to complete setup automatically for convenience. 




Pick your plug-ins 

N ow would be a good time to 
install your favourite, must-have plug-ins 
and any extras that you may have 
decided are essential to your store. There 
is a wealth of premium WooCommerce 
extensions which bolt additional 
functionality on to the core plug-in that 
can be purchased here, yxww. 
wooth ernes .com fexten stons/ 

woocommerce-ex tens ions. 






07 Install your theme 


WooCommerce is designed to 
integrate with the default WP theme 
(Twenty Eleven] but since version 1.4, 
it's easier to use with other themes too. 
including those which are purely 
focused on selling products. Wootique, 
included on this month's CD, is one 
example, Install it as normal Oe upload 
theme folder to /wp-content/themes), 
activate it and have a play. 


r 


Who is Woo? 

WooThemes specialises 
In premium WP theme 
and plug-in design and 
development. Founded 
three years ago Woo is 
now known as one of 
the most successful 
WordPress startups. 


General content population 

At this point in the proceedings it may be a good 
opportunity to take care of some of the more 'boring' 
content. Luckily if you spent adequate time on your 
earlier preparation then this stage shouldn't take long. 
Start laying the foundations of your store by adding key 
elements like terms, privacy policy, shipping policies, etc. 
as standard WordPress pages. 



Configure WooCommerce 

Now it’s time to sink your teeth into the 


WooCommerce configuration. Good preparation is the 
key but it's well worth having a good read through the 
extensive documentation online. As you'd expect, the 
General tab contains store-wide options such as 
currency settings, counines you're willing to ship to. 
security options and some JS optimisation options. 



Ta ilor your store 

d .1 

01 _Background image 

Using the theme options in Wootique you 
can make a host of changes. Upload a 
background photo or a tiled texture to 
better tie the store In with the produc Ls. 




02 _Navigation <& shadow 

You can easily adjust the strength of the 
drop shadow on the main content frame 
and play with the opacity of the 
navigation if necessary. 



You can even modify the typography in 
your eShop by securely loading web fonts 
from Google's extensive library. There are 
plenty of options to suit all kinds of store 
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I Open a feature-rich eShop using WordPress 


Configure WooCommerce 2 

In the Catalog tab you can define settings relating directly to 
your product archives, Choose whether to display subcategories, 
specify weight and dimension units, control currency/decimal positions 
and input dimensions for your product imagery. 



Far from taxing... 

The scale of your store a nd where you 're 
shipping to will ultimately dictate your tax settings, 
WooCommerce has comprehensive tax options so you 
can setup multiple rates and even compound and state 
taxes. It also offers many shipping options including flat 
rates, local delivery/pickup and classes. 




Payment and emails 

WooCommerce provides support for several 
payment options including cheque, bank transfer, cash 
on delivery and PayPal, which for most small stores is 
sufficient. To configure PayPal the only piece of 
information you need is your PayPal ID {email address). 
Finally you can make tweaks In the Emails tab to taste. 


(£ Diihbwd 

Q Orders 

A Postil 


Oft MtKilft 

AilSSS) 

a? Link. 

Bum Actons - 

|U Poffw 

Q Status 

Cjmjnwlt 

n m: - "’ T » 

J Wootaqu. 

► 


o 633=51 


(Optional) dummy content 

To get a feel for the product creation process 
you may wish to import the , dummy_content.xml' file 
from the disc. This will populate your store with some 
ready-made products, attributes and categories (which 
can be deleted later), including variable and grouped 
products. You can also check out the frontend now. 


Managing your orders 


It's important to he prepared for the 
Impending flood of orders you’ll no 
doubt receive post launch. Fa mill ah se 
yourself with ordei statuses: Pending 
- order received; Failed - payment 
f alled/decllned; Processing - payment 
received: Completed - order fulfilled; 
On-hold - awaiting payment; 
Cancelled - cancelled by an admin; 
Refunded - refunded by an admin. 

Note that from the order screen you 
can manually change order statuses, 
edit the order, reduce stock and send 
the customer an invoice, or handle 
any general communications 
regarding their order via email. This is 
also where you'll be able to check any 
notes the customer may have 
attached to their order. 

Keep on top of your orders as 
customers can (and will! check on the 
status of their order via the tracking 
functionality of WooCommerce. 




Product categories 

^ Categories can be nested end dragged and 
dropped into order, Don't confuse categories with 
attributes. Think of categories as main navigation 
anchors, while attributes narrow down products; eg in a 
videogame store categories might be Games. Consoles, 
etc, while attribute sets might be Genre, Platform, etc. 



Shipping classes enable you to 
specify fiat shipping rates which can then 
be applied to specific products. So if you 
have a group of large/heavy products, you 
can create a speofic rate for those, define 
its availability and calculate the shipping 
cost per item, per order or per class. 
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What are attributes? 

Particularly i n la rger stores, attri butes a re an i nvaluable asset 
allowing your customers to drill down products to find exactly wtiat 
they are looking for ■ quickly. Attribute sets such as size and colour are 
also essential for setting up variable products such as clothes. Have a 
dose read of the attrcbutes in the WooCommerce documentation. 



Product types 

We're nearly ready to begin adding products but, 
before we do, it's a good idea to familiarise yourself with 
the various product types. Simple products are 
self-explanatory and can be virtual (for a service) or 
downloadable (fora digital product). Grouped products 
are for grouping simple products - for example, a 
PlayStation 3 could be a grouped product containing 
320GB and 160GB options, Variable products are those 
with many different options - for example, a T-shirt 
available in a range of sizes and colours. 


Product Type 


Product Type 


Grouped product 

External/Affiliate product 
Variable product 

Virtual 

Downloadable 

Q Enable trijs option if access fs 




^T - If you're comfortable with general 
WordPress usage then creating products 
should be very familiar. In fact it’s very 


similar to authoring a post - there are 
just a few more fields to fill In I Remember 
to assign up-selis and cross-sells to your 
products to maximise potential profit per 
order and be sure to include descriptive 
content, which will be a great benefit to 
your store from an S£0 perspective. 


jg Widgets 

Widgets are the 
final step in the store 
configuration. In 
WooCommerce there are 
many useful built-in 
widgets which you can 
place in the widgetised 
areas of the Wootique 
theme (Appearance* 
Widgets). The sidebar is 
perfect for displaying the 
cart and search widgets, 
while the footer regions 
are ideal for top-rated 
and bestselling product 



Testing times 

It's absolutely crucial that the moment your store 
goes live, customers can place orders hassle free. A good 
tip is to set up a test product worth a penny and run 
through the entire order process, from finding a product, 
to adding it to the cart, to checking out and paying (then 
downloading if its a downloadable commodity). Test in 
various browsers on different operating systems. 


Open for business! 


Sit back, relax and let the moolah roll in! Of course, 
becoming the next Amazon isn't going to happen over 
night The backbone of any successful online business is 
top-notch customer service and doggedly maintaining 
your search positions and staying competitive on unit/ 
shipping costs. But with WordPress and WooGommeree, 
never has it been so easy to embark on the exciting 
journey of building and running your very own eShop. 


Emporium 

Blog Shop T-shirts Games 

Prints Strategy 

■ 

You are here; Home > Checkout » Order rireeiwd 

Order Received 


Product Ca 

Thank you. Your order has been received. 


Accessories IS) 
Prints (5) 

* Order; # 2995 


Shop iPhone (3) 
Shop iPod {4) 

■ Date; January 2d, 2012 


Shop Mac (11) 

• Total; £24,99 


Software (2) 

« Payment method: Cheque Payment 


T-shirts (20) 

1 Please send your cheque to Store Name, Store Street, Store Town, Store 


State / County, Store Postcode. 


Shopping C 

Order Details 

Product Qty 

Totals 

No products in 

New Super Mario Bros l 

£24,99 

Top Rated 

Cart Subtotal. 

£24.99 

Beyond the Moor 

UK Sales {20%} 

14,17 

***** 

From; £14.00 

Order Total; 

£24.99 




New Super Mario 

***** 

129 £24.99 
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I Migrate from Google SketchtJp to WebGL 


Migrate from 

SketchUpto 

WebGL 

Conquer the enticing if baffling world of 
HTMLSs native 3D web graphics with 
Sketch Up, CopperCube and WebGL 


tools I tecli I trends Google SketchUp (free version). CopperCube (trial 
version), image editor expert Robin de Jongh 



ast Issue we created a 
simple 3D version of the 
HTML5 logo using 
Googles mind-bendingly 
simple but feature-rich 3D 
app r SketchUp. Now we're 
going to go a stage further 
and prepare it for the web 
bv orating an animated 
scene, setting up lighting. 

animating it and also applying some simple interactivity. 

.Stuff like this has been possible for years - so why 
should we bother with it now? Well. the reason is that 
HTML5 is rewriting the rulebook and, in the near future, 
the 3D graphics library - WebGL - will be supported as 
standard. What this means for web designers is that 
browsers that support the standard, such as Firefox and 
Chrome, enable 3D objects to display natively (with no 
plug-ins such as Flash needed). Essentially this means 
that 3D elements can become integral to the design of 
a webpage like never before and we can build on some 
fundamental principles to create richer experiences.. 



HTML5 is rewriting the 
rulebook and, in the near 
future, WebGL will be 
supported as standard 





Check WebGL compatibility 

^ Go to www.ambiera corWcoppercube a iid select the Windows or 
Mac download button for CopperCube. then install the program. This is 
the 3D content authoring tool you will use to convert your CQLLADA 
(DAE) file to WebGL-readable content. Now go to http:tiget.webfll.orfl: f 
you see a spinning cube then you have a WebGL-enabled browser. 
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Migrate from Gcxjgle SketchUp to WebGL | 



Open the logo 

If you haven't already pick up a copy of Google 
SketchUp frail MttflskfitchLip.g qqs le.cotn/dQwn load 

Open the SketchUp HTTM15 logo file you created in last 
month's tutorial or grab 'HTMLSJogo^web.skp' from 
this issue's disc. In SketchUp. select the logo, go to 
View>Toolbars>Views and pick the Right view. 



Move the model 

■ -™ Zoom in to the tip of the shield using the scroll 
wheel. Select the Move button and click on the tip. then 
push the shield along the green axis until the red axis is 
approximately in the middle of the model. Holding the 
Shift key will lock movement to the green axis. 


Create a colour texture 

CoppbrCube doesn't import SketchUp colours, 
so we need to create some colour textures instead, in 
your image editor open the HTML5 logo from part 1. or 
'HTML5_Logo_Sl2.png' from the cover disc. Crop a 16 x 
16px area of orange from the logo then go to FiloSave 
As and name the file 'Orange.jpg', 



Rotate the model 

Select the Rotate icon or alternatively press the 
J R' key. Click on the blue axis just below the left side of 
the shield. Move the cursor to the right and you will see 
it follow a dotted green line, Click here, then move the 
cursor up and to the left, rotating the shield, and click 
again when the On Blue Axis message flags up. 



The centre axis 

Once more click the ti p of the shield and move 
the cursor up so that you see the dotted blue axis. 

Again hold Shift to lock to that axis then click on the 
origin. Your model should now sit with the lowest centre 
point at the origin, which is the crossing point of the red. 
green and blue axes. 


Apply the texture 

^ Back in SketchUp. dick on the Paint Bucket tool 

to open the Materials palette. Hit the Home icon to 
show the materials in the model. Select the orange- 
coloured area (shield), then go to the Edit>Use Texture 
Image and browse to the Orangejpg image you just 
created tor use the version provided on the CD), 





Alternative Stage3D 
Flash content 



or Chrome won't be able Loses WebGL 
content. InGopperCube go to Publishing 
Settings and select the Flash tab. 



02 _Flash settings 

Rename your HTML file or else it will be 
overwritten. Set width. height and frames 
pet second. Click OK. then select Publish 
as Flash in the top toolbar. 



Export as usual. In the HTML add the code 
below between the <camras> elements, [f 
the browser doesn't recognise die 
<canvas> element., it will call the fallback. 

001<object width^'ASO'' 
height^'480> 

002 <etnbed src- Jf HTML5_ 

scene.swf 1 “ 

003 type="applicaticin/x- 

shockwave-flash J ' 

004 allowacriptaccess= J 'always JI 
005 allowfullscreen= J 'true' J 
006 widt w 48d w 
007 height- f 480" 'wnode- r, direct"> 
008 </embeck 

009 <div align=''center J, >Latest 
flash plugin required f or use 
Chrome or Firefox Browser.</div> 
010</ohject> 

0ll<./ceinva5> 

012 
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Modify the texture 

You only need to do this once, because you can 
modify the hue In SketchUp to create black and white 
textures. Go back to the Select tab and pick the white 
material C5‘) then add the Orange.jpg texture to it as 
before. Now dick in the middle of the Color Wheel and 
bump the neighbouring slider to the top tie white). 



COLLADA export settings 

Repeat step 3 for the black area CHTMQ moving 
the slider just above the bottom, Hit the Spacebar for 
the Select tool then Ctrl/right-dick*Explode. Now select 
just the 'HTML' text and go to File*Export>3D Model. 
Make COLLADA the export type and enable the Export 
only selection and Export texture maps options. 



I-1 I IUI ULt 

the 3D origin 

With 3D models, always place 
the origin at the lowest centre 
point, if possible. This makes it 
much easier to place, rotate and 
animate on the X. Y and Z axes. 



Welcome to CopperCube 

Name the file "HTML text.dae' and hit Export. 
Now select all of the shield and export this as 
'HTML5.shield.dae', Save and close SketchUp. Launch 
CopperCube and choose the Free 3D Scene option that 
appears on startup. Select and delete the metal box 
displayed in the main window and then go to File* 
lmport>5tatic 3D Mesh from file. 



Import SketchUp models 

Select and open the 'HTMLJext.dae and 
'HTMl5_shieSd.dae' files. Hold the middle mouse button 


to pan the view until you can see both objects. Click on 
the Startup Skybox item in the SceneGraph Explorer list 
and delete it. Go to the Top Down View icon or hit F2 ; 
you can rotate the mouse to zoom in or out. 



12 Lighten up 

In the Scene Editing tab. select Create a Point 
Light. Click on the red arrow and move the light down 
so that the ring around it covers the shield; this ring 
signifies the range of the illumination. Use the blue 
arrow to push it just to the right of the side of the shield 
with the '5' element protruding. 


Tweak light properties 

Next, in the Properties palette, select Color and 
dick on the button with the three dots. Select a red 
shade in the mam panel then move the slider right up 
in order to get a very faint pinkish-white; click OK. Now 
go to the Front view and reposition the light to just 
above the centre of the shield. 


Waiting for JS libraries and 3D 
authoringtools 


If you're a dab hand at JavaScript you may like to 
know that WebGL Is accessed with JavaScript. In 
fact. If you really wanted to you could describe 3D 
objects In JS code, then manipulate, shade and 
animate them using just the WebGL commands. 
However, just as most designers no w use a JS 
library such as jQuery to do all the hard work, so 
you should use a library lor WebGL. Current 
frontrunners include Scene js* Three.js and 
CopperLlcht. Using a 3D authoring tool alongside 
SketchUp is a best option for most designers and 
CopperCube (which uses the CopperLlcht JS 
ilbraryJis probably the easiest to start with,. 



Get the camera rolling 

■ Click on the Create a Camera icon and select a 
Model Viewer Camera. Use the green arrow to move it 
just above the 'HTML' object. Switch to the Perspective 
view. Click on the little box at the end of the camera’s 
sight line then use the green and blue arrows to move 
this into the middle of the shield. 



Find a focal point 

Switch to Front and then Left views to make sure 
the box is in the centre of the shield; move if necessary. 
Back in the Perspective view select the camera, go to 
the Behavior tab and pick Mode Viewer Camera Style 
Controlled. Change the Radius to 20 and uncheck 
Vertical Movement Allowed. Save the scene- 
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View in browser 

^ Go to Tools>Test as WebGL and use your mouse 
to orbit the model in your browser. Moke adjustments to 
the camera target if you need to and test again, Back in 
CopperGube, select the 'HTML' text and go to the 
Materials tab. Select Dynamic in the Lighting dropdown. 
Repeat this process for the shield then test again. 


Update the lighting 

Add another light and position it near the 
opposite side of the shield, This time the effect of the 
light is updated in real-time, Move it up so that It 
illuminates the 'HTML text as well as the shield. Next 
select the 'HTML object, go to the Behavior tab and 
dick on Add a new behavior; from here choose Rotate. 



Control rotation speed 

Change the text to these values; 0.0, 0.2, 0.0- 
Now go to the Attributes tab and set rotation back to all 
zeroes. Repeat this for the shield, and this time get it 
rotating in the opposite direction by entering: 0.0.-0.2. 
00. At the top of the Explorer palette, pick the Free3D 
Scenel and, under Properties, select the Attributes tab. 



A different viewpoint 

* Select Background Color and change it to white 
as you did earlier. Activate the camera object and use 
the blue, red and green arrows to move it to get the 
best start view. The camera will be constrained at a 
fixed distance from the centre of the model, so you can 
safely move and test this without losing the focus, 



WebGL export 

Go to Publish Publishing Settings and. in the 
General tab enter 1 ITML5_Logo'. Next, in the WebGL 
tab. enter width and height values of 480. and set the 
fps to 24. Select Publish as WebGL (html) from the 
dropdown before clicking OK. Your WebGL page is 
created In the same folder as your CopperCube scene, 


B C:*D« Ilmen is j(idSetfines l iRbli\I>esktiip\sltetch«p_webgl_c&ppeicu|jeVCever di$kViTML5_$eera 

jJilffil H&i^pad^ 

Fie Edit Search View Encwfrxj Law Settings Macro Run Widow 7 

or-«® • •& 4 Ot >e •‘b « « css & 1 CD® * 

> 1 as 

B HTNLS^cenehtml | 


]<heod> 

q»ets fcctp-ecmv" Content-Type' content-* text/hUal, j chancet-igo 08^9 1"> 

<3 er tpt type ■ “ tent /□ av «c r ipt- jjtc- * c oppe rii cm eat a/c opre r Hunt *3 ■ “ ser ipt > 

■ 

3 

cdlv •ligm*“ceflter“> 

<cratwaa id-* 33drea‘ width * 4 JBIT height- 4 460' 3 tyle* J bachtfrouAil-cc-lor;#OOOOOiO"> 

</CaEVlLS> 

</div> 

<acri.pt type""text/javascript*? 

<! — 

acartCopperLlclirFrQWjn-let 3ar * , --OPf £v 1 lcfinj- v f HTKL • scene, cbj ; j ; 

—> 


<dlv a Injun" cent er“> 

Created using the «rf- M-tp; //huu . , rnrti/lcPJ 1 ' 4 ' .1 * cht/imli-K .Mm Cl 

JavaScript » Engine and the 1 - - lit Ip: //wwu. .tmb^-ra. cum/eai>]jei'<'tlhe/index I 

3D Editor /3></si!Kill> 

</diig| J 

‘</Ucjay> 

</htnl> 




Hyper TeMt Startup Language f fe 


length: 710 Ines : 23 


Finalise the HTML 

Open the HTML file in your HTML editor. Remove the text between 
the last <script> and the </body> tag. Paste this code into arsy webpage to 
display the spinning logo where you like. Just place the tapper lichtdata' 
folder into the same web folder. You have now mastered 3D WebGL logos? 


The rule 
of three 

Try adding a few more 
lights. A three-light setup 
is optimum to give a 
feeling of depth to your 
scene. Usually two up 
front and a smaller back 
light work well 
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Need an inspirational site dissected?0 webdesignerfaimagine-publishing.co.uk 



Building headers with 
colourful animated text 



Inspiration 

Using contrast 
to best effect 


inspiration www.roggeundpott.de 


Contrast s a key weapon in any designer's 
arsenal and we should always consider this 


hen creating websites with 
dark backgrounds, colourful 
stylistic content really 
stands out - whether it 3 s 


background to show off its previous projects. 
Where this style really excels is the animated 
text header which pops up across the site. 
This has been done in Flash and uses the 


when wofkng on a Ul. Remember the 
interface for a website isn't just the 
navigation, header and branding, but every 
part of the page that communicatES - that 
can be illustration, text video sound and 



Bright text 

Each of the headings for 
the projects section of the 
website is animated Into 
the design with a unique 
bright colo ur to give it high 
contrast to the background. 


Blending modes 
Blending modes affect the way 
colau rs ap pear when overla id o n one 
another. As the text starts to overlap 
the Add blend mode simulates 
coloured light overlapping So tones 

eventually become white. 


Easing does It 

As each of the words Is 
brought on to the 
webpage the animation 
uses art easing effect so 
that the content slows 
smoothly before stopping. 


Coloured square s 

Under each of the projects is a 
number of small coloured 
squares which match the 
colou rs of the titles. Th is 
colour-codes the projects 
with the areas they represent. 


Projects section 

When the user clicks on 
one of the categories of 
projects. a! 1 of the words 
a nimate out of the screen 
except for the relevant 
project areats). 


animation. Hjgh contrast is always the best 
way to communicate and is especially good 
from an accessJblfty point of view, but 
beyond that it makes your rnsssage 
clearer as everything leaps out the 
screen. Classic examples of high 
contrast would be light text on a 
rlark background or wee versa. 


photos, type or graphics. 

This is the technique used in 
real portfolios taken by hand 
to clients for years, so it's no 
surprise that this should also be the choice 
for many when transferring their work 
online. This Is certainly the case for Rogge & 
Pott Design, whose site uses a dark-grey 


Add blending mode to create 
areas of brightness where 
the words overlap. The 
text animates in and 
out on different 
pages, depending 
on the navigation 
that is selected. 
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Building headers with colourful animated text I 



<coruruent> 


A viewfrcm 
the inskfcof 
the pfQject 


Sixties-inspired styling 

"We wanted something that plays on the interaction and combination of the 
different design disciplines that we offer at the agency, inspired by the classy 
but bold Helvetica/CMYK/overlay/graphics combination used back in the 
Sixties, we went for Lhe animaLed heads using the same colour-coding we 
adopted for the rest of the site - even if this meant using Flash” 

H cun ing Rogge, c restive d irector, Rogge & Pott 



Technique; Animate your header titles 



Write a title 

Open Flash and use the Text 
tool to create a large title for your site 
in a bright blue colour. Change the 
background colour of the document 
to dark grey so that it stands out. 


Convert to a dip 

Select the text on the screen 
and, from the Modify menu, choose 
Convert to Symbol, give it a name, 
make it a movie clip and choose 
top-left on the Registration box. 


Position off stage 

*' For the time being, move the 
text off the stage to either the left or 
right as we will be making the 
different titles animate onto the page 
from a variety of places/d inactions. 



Technique; 

Blending modes 
explained 

Blending modes can be a little tricky to 
understand although they are widely 
available In many creative programs that 
help us as designers. Here we reveal a bit 
of the science behind how they work. 




Additive blending 

Additive blending occurs when pixels 
that overlap have their values added to the 
colour of the pixels beneath, if enough 
colours overlap, the result will take the value 
up to white: this is the way light behaves too. 


* ;w 



Try new blends 

With the title selected, look 
inside the Properties panel and find 
the Blend Mode dropdown. Change 
this from Normal to Add in order to 
get the additive colour effect 



Add frames 

Select frame 90 on the 
timeline and hit F5 to add a frame, 
then Ctrl/right-el ick the timeline and 
add a motion tween. Next move the 
text so it's aligned to the left. 


Easing into it 

In the Motion Editor panel, 
scroll to the bottom of the window 
and then, under the Ease section, 
bump up the Simple (Slow) 
parameter f nom 0 to 100. 



Subtractive blending 

‘ v - Subtractive blending is what happens 
when you mix inks or paint together: more 
and more colours will end upas black. The 
Subtract blend mode would be an example 
of this but Darken and Multiply are similar. 




Apply to the X axis 

^ ' Scroll to the X property in the 
Motion Editor and change the Ease 
drop menu from No Ease to Simple 
(Slew) to apply the easing to this title. 


Repeat the process 

Add more words and convert 
them to movie clips, then animate 
them arriving on the screen from 
various locations at different speeds. 


Publish the file 

Hit Cmd/Qrl+Return to test 
the animation: this also publishes a 
SWF version of the file In the folder 
that the project is saved to. 



Overlay blending 

w- This mode is a mix of the two. Light 
parts become lighter while dark parts 
become darker using an S-curve. This mode 
offers some really interesting results - 
particularly with overlapping images. 
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Need an inspirational site dissected? webdesigner@imagine-nublishing.co.uk 



Apply a modern 
take on retro styles 

inspiration www.thisistommv. c om 


o-fl styles are looking to 
cut and paste past styles 
Into the present. Web 

: designers are using these 

P*e-dlgltal effects to 
paradoxically revolutionise 
today's more synthetic 
styles. This isn't so much a 
battle of retro versus modern as it is an 
analogue look versus a digital one. 

Unlike mixed-media styles, although 
applying grunge elements, the lo-fi 
approach is totally tailored and 
intentional down to every last detail. 
Will Tunstall, creative partner at Tommy 
(www.thisistommy.CQm) explains; 
“Firstly the use of colour becomes vital. 
We spent a long time looking at those 
applied in our own site, especially on 
the Work page. We knew it had to be 
colourful buL for the design to carry off 
the vintage feel, the cotours have to be 
desaturated and muted by the right 


amount to stop them feeling digital. 
Also to become a convincing part of 
the page, I also applied subtle gradients 
to suggest some sunlight fading." 

Textures also play a role in creating 
that sense of weathering, combined 
with digital assets (eg photos of tarmac., 
concrete and paint). Tunstall uses one 
transparent repeatable PNG, applied 
on top of background colours in the 
CSS, to save on file size. 

The choice of type can also make a 
great visual impact, creating a more 
coherent took. Tunstall comments on 
the fonts used on the Tommy website: 
“We've picked League Gothic and 
Alternate Gothic; [they manage! to 
convey a sense of humour in a very 
rigid, structured way. Using a single 
typeface can become quickly 
monotonous, however, so the two 
fonts complement each other, and 
keep the text varied and fresh." 



wnat makes 
older styles 
50 popular? 


The appeal of the past 

1 think people always enjoy a sense of nostalgia - there's a safety 
and comfort in it. It feels less big business and corporate, and 
more homegrown. From a brand perspective its also possibly a 
reaction to the user now being the main content generator, 
wanting to fit into that with a softer approach." 

Will Tunstall. creative partner, «rwwthlctrtmtimy ff.m 



Technique 

Age with textures 
and gradients 

Creating that perfect lo-fi layout would 
be impossible without subtle textures 
and the right tonal ranges. Textures In 
particular create distressed/aged effects, 
while paied gradients can replicate 
colours seen only in older photos or 
those exposed to light. Applying these in 
the right way to your panels and icons 
can produce exciting results. The choice 
of fonts is also key; think Alternate Gothic, 
Impact Menlo, AriaL BlairMdiTC TT. etc. 



01 Shape up 

Choose a simple panel or logo 
shape, eg a circle or rectangle. Apply a 
pale colour, setting your foreground and 
background tones to a lighter and darker 
variation; we've used #c42036. 




Apply gradients 

Now select G radient Overlay from 
the Layer Styles options. Set the Angle to 
■30. Click and drag your gradient to isolate 
highlights to your shape's top-left comer. 
Next, import a grungy texture. 


Add some bump 

set the texture layer Mend mode 
to Overlay (Opacity 60%) and add a layer 
mask to the texture. Select both layers. 
Ctrl/rlght-click and hit Smart Object. You 
can now copy this to make more panels. 


72 


web workshop 








































































<tatorials> 


Apply a modern take on retro styles I 


ff 


OUR COMPANY 1 

BN Ep PRODUCTION OF ALL MANNER OF DIGITAL CREATIVE 

o|® 

ItAi OXFOFm STTIEET, LDHDONWTQ 1 LP 



e Streets 


BRANDS, COMPANIES AND 

INDIVIDUALS 


“ Tonal 
application 

Desatu rated colours 
are applied to avoid a 
digital feel, with colour 
gradients added to 
generate a faded-over- 
time effect. 


Fresh fonts 

The sate s typography 
manages to convey 
both a sense of 
person at ity and 
structure, with a mix of 
fonts complementing 
each other and 
keeping things fresh. 



WE LOVE 

OUR WORK, OUR OFFICE 

SMART IDEAS AND BEING PLAYFUL 


BETWEEN US, WE'VE WORKED ON OVER 

inn 





Inspiration 

Bygone brands 


Will Tunstali explains where the inspiration 
for the site came from: "ideas came from 
a lot of places, but mostly aesthetic print 
campaigns that were around in the Fifties 
and Sixties. Core examples were major 
American brands such as Pepsi and 
Chrysler. We were also inspired by Geigy 
Pharmaceuticals packaging from the 
Seventies. All of these brands promote 
bold colours, shapes and typography. 
There's even some influence from toy and 
food packaging from as far back as the 
early 1900s in ttierel" 



Technique 

From new to old 

Use Photoshop adjustment filters, blending 
options and brush tools to create layered lo-fi 
filters to turn any modern image vintage. 



Brightness and colour 

Duplicate you r photo and set the 


blend mode to Cotor Dodge at 40-60%. 
Apply a Sepia Photo Filter adjustment layer at 
70% Density, Then add a Brightness/Contrast 
adjustment layer, with Saturation set to 20, 








i 





Curve control 

Apply a Hue/Saturation adjustment 
layer with Saturation at 20. Add a Curves 


adjustment layer and load our Lo-fi Curves 
preset 1 file from the disc. Cheek through the 
R,G and B channels (yia the RGB drop 
option) to get a feel for their arrangement 



Add some flare 

Get the discoloured Polaroid effect 
by creating a new layer and applying large 
0% Hardness red/orange brushes around 
your image. Set the blend mode to Color 
Dodge (40% Opacity). Finally, merge all 
layers and apply a low-level Noise filter. 
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Create stylish content 
on a single page 

mspi ration www.ascensionlatorre.com 


[:j:::|E:E:E:E he Ascension Latorre 
website uses a selection of 
full-width blocks of 
content which are stacked 
or one another, essentially 
creating a single page that 
displays everything on 
offer. Access to content is 
via a standard navigation system set in 
a fixed header bar. To give the vertical 
scrolling a sense of smooth movement 
a variety of code is utilised. 

The key to this site is the fixed header 
and the individual sections which 
contain the content. Here we are going 
to create a basic template that will 
integrate a fixed header and three 
content sections which can be 
populated as desired. Each section Is 
essentially two parts: the containing 
block and the content block. 

The first element we consider is the 
fixed header (Technique 2). This 
interacts with the first block, meaning 
that the first section will need a margin 
at the top that matches the height of 
the fixed header to ensure that all 
content is visible. This also means that 
the first section will have an ID rather 
than a class. If a class is used and 
applied to all sections, each section will 
have an unwanted margin at the top, To 
compensate, a new div Is going to be 
used for each section; this offers more 
flexibility, allowing each area of the 
page to be customised to suit, 


The first element, after the header, is 
the containing block. This will have a 
width of 1G0K and a fixed height 
although this Is optional. Inside the 
containing block is another section 
where the content will be placed. The 
width is flexible, but the height needs to 
be the same as the containing block. 
The last thing to do is to create further 
sections - as many as you need - using 
the same simple process. 

HTML 

001 <div id= hh section01”> 

002 <div id= ff 5ection01inner ff > 

003 

004 </div><!— //#section0linner 
—> 

005 </divxE— //#section01 --> 

CSS 

001 flsectionSl { 

002 background; #FFF url(images/ 
image,jpg) repeat-x; 

003 height: 5&0px; 

004 width: 100%; 

005 margin-top: 35px; 

006 float: left; 

007 padding; 0px 10px; 

008 border-bottcm; 5px solid 
#$G6;} 

009 

010 #section01inner ( 

011 height: 5&0px; 

012 width: 1000px; 

013 margin: auto;} 


Background 

texture 


A plain texture sits 
behind all the sections 
to create a backdrop 
for those that do not 
have a background 
element,such as a 
colour or an image. 


Vertical scrolling 

The Latorre site is 
effectively a single page 
allowing users to scroll 
down and across to 
view content. A simple 
scrolling effects 
applied to each link to 
ge ntly ease visitors 
into each section. 


Image gallery 
The Philosophy 
section boasts an 
image slider which 
scrolls horizontally 
to reveal more 
images. Individual 
shots can be viewed 
full screen with a 
singleclick. 




COLLECTION 




TI-CIIWIQ1J] 




Inspire! Avant-garde style 


The images found across this furniture maker's site 
perfectly reflect their signature style - sophisticated and 
contemporary. Latorre themselves describe their style 
as classic avant-garde. The whole site makes use of a 
dark colour palette interspersed with gold and greys all 
expertly matched by subtle leather textures and 
shadows. To complement the colour scheme a classic 
serif font (Museo Slab) is used for titles and these have 
contrasting colours and differing weights for emphasis. 
The body text again uses a classic serif font to round off 
a super-sophisticated website for this Spanish brand, 



Holding tag 

™ To make sure the fixed header works in tandem 
with the rest of the content the first step as to create a div 
tag. Name it as you wish or use the <header> tag if 
appropriate. Set the width to 100%. position to fixed, then 
add a background texture and a bottom border to better 
separate the content on the page for a dean look, 

001 header { 

002 height: 30px; 

003 width: 100%; 

004 background: #111 url(images/leather.jpg); 
005 position: fixed; 

006 border-bottom: lpx daahed #555; 

007 } 


74 


web workshop 









































I 


•editorials 


Create stylish content on a single page | 



Navigation 

The navigation menu 
is situated inside a 
fixed header so 
access to the page 
sections is always 
readily available, As 
the page scrolls down 
the company name 

subtly fades out to 
leave j ust the logo. 


KAiffl^nru 

tinder mg £)m 


LATOIIZ LIFE 

Mar* rwu- 


CQMTACT 

ivhtrctojiniiiiS 


HTML5 tags 

Each of the different 
sections Is created 
using HTML5 tags. 
Individual elements 
use the <section> 
tag: th is is defined as 
'a generic section of 
a document' by the 
WHATWG 
community fwww. 
what wo. oral. 


Scrolling in style ^ 
with Ascension Latorre 

Each of the sections on the 
Latorre site Is Individually 
styled with the Philosophy 
section using a parallax 
background technique. The 
background uses three layers 
of transparent images placed 
on top of one another to 
create a 3D effect. Careful 
positioning of the images 
en h ances the effect as the a 
page si id es up a nd down. JU 


Build a fixed header 


i 




Inner header 

The menu for the header is set inside the 
holding tag we created in the previous step. Simply add 
the following code directly after the opening ^header* 
tag: <div id='innerhead'x/div> - and make sure that 
you remember to comment the closing tag - ie <!--// 

If inner head Now set the width to the same as the 
main section - eg IQOOpx - minus any padding, and 
both the left and right margins to auto. 

001 #innerheader { 

002 width: 9S0 pk; 

003 padding: 0px IQpx; 

004 margin: 0px auto, 

005 > 


03 The first section 

Next up we need to populate the#innerhead tag 
with the appropriate links. The most obvious option is to 
use <ul> and <li> tags (see Technique 3 for more on 
these). Once complete the first section that appears 
directly under the header needs to be styled. Note the 
height of the header - including any padding - and 
apply this measurement as a top margin. 

001 background: #FFF url(images/image,jpg) 
repeat-x; 

002 height: 510px; 

003 width: 100%; 

004 margin-top: 35px; 

005 } 


TECHNIQUE 

Getting to grips 
with list tags 

List tags, or <Ii>s. are a quick and easy way to 
create a senes of headers on a website's main 
navigation menu or submenus, Here we take 
a look at what makes <Ji>s tick. 

Unordered lists 

A popular method for creating a 
set of navigation links is the use of the <ul> 
and <li> tags. This method offers both 
flexibility and speed In the creation process. 
To get started arid a sot of unordo od st 
tags inside the appropriate container 
tag. Inside these add several list (di>) tags; 
you'll need one for each link. 

001 <ul> 

002 <lix/li> 

003 <lix/li> 

004 <lix/Ii> 

005 <lix/li> 

005 <AiL> 

Remove bullet points 

™ By default, a list adds bui let poi nts: to 
remove these and take greater control of 
the list styling set the list style type to none. 
Now change the margins and padding to 0 
for both the <ul> and <li> tags. To modify the 
orientation of the menu just set the float 
element of the <li> to left 

001 li { 

002 margin; 0px; 

003 padding: 0px 

004 list-style-type; none; 

005 float: left;} 

)3 Final touches 

P Populate the <l i> tags and add any 
more if needed. Add a hash tag (#) - le <ll><a 
href= ,h r>UNK 0NE</a></ll> : this will 
activate the link Put without redirecting to a 
destination, which makes it ideal for testing. 
To increase space, add the necessary 
padding to suit the design. Finally, include a 
background image to create a pointer for 
each item on the list, 

001 li { 

002 margin: Opx; 

003 padding; 0px 5px @px 17px; 

004 list-style-type: none; 

005 float: left; 

006 background: url(images/!1st.jpg) 
no-repeat 9px 2px;} 
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Get your site seen, or suggest a theme 

Tweet us with the URL or topic % @WebDesignerMag 


Design 

■Clondi 


Go mobile 

The small screen is more popular than ever. Here 
we bring together some of the best examples of 
mobile site design currently gracing the web 



flickr 


Welcome Explore Nearby Search 


Share your photos* Watch the world, 


DIGITAL DESIGNER 

about portfolio blog contact 


At Sunday Best, we focus on the tech 
(CMS, Hosting, Email, Design and 
Development) so you can focus on 


your ministry, 


ER VICES PORTFOLIO ABOUT CONTACT 


KCtoftllEV 


Milk Chocolate 




creative designer 

specializing in 


interface design 


Tf — ^1 

IQ 

Wj 

1 o 
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A BOLD CHALLENGE 

SPACEI5Q IS A FULL SERVICE 

DIGITAL AGENCY ON A MUM TO 

DESTROY CDHVEHTTDN AND CREATE DEMAND 

FDR DUR CLIENTS. 


GET PUNCHED AND LIKE IT 

SMOKIN' SEASON" 
PASS PUNCH CAR 


jK 5:41“ 

9371 Tue. Jan 17 


To Do Tomorrow. 

Jury Duty 


I King's Phone I 


W * V 

Menu Store Locate* Videos 






VERSACE CRUISE 
COLLECTION 


* Home ► Versace Cruise Collection 



►I 


■p 


STATE ofthe UNION 

Attend a House Party 


Find an event 


A FREE 

AND OPEN 
INTERNET 

i.*i\ , 



Add your name 


BORN FROM THE DIGITAL AGE. 


inof 


HAS EVOLVED 

TO HELP BUSINESSES OF ALL TYPES 

BUILD STRONG 
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Develop a 
secure log-in 
system with RoR 

Part 2 of our Rails mini-series 
moves onto how to add user 
management to your apps. Page 84 


Dedicated to the code-heavy 
side of modern online design 


An in-de pth 
introduction I 
to JSON: part 2 

Build on last month’s starter guide by 
implementing a Twitter feed. Page 88 
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Why optimising your code still matters, with an assortment of 
techniques, tools and developer resources. Page 80 



















PUSH FOR PEAK 
PERFORMANCE 

With today’s ever-more powerful hardware and superfast networks, it can be easy to grow 
complacent when it comes to keeping your code light. Envato evangelist Jeffrey Way is here 
to persuade us it’s more important than ever and offer a few expert tips along the way... 


B elieve It or not the concept of optimising 
front-end code for maximum 
performance is a relatively new thing. 

Sure, years and years ago, we knew that it 
was important, but we simply didn’t have access to 
the tools that we do today. Even six years ago, we 
were far more concerned with wrangling our 
websites into functioning correctly in Internet 


Explorer 6 than with squeezing every ounce of 
performance out of our applications, 

Luc ki ly, these d ays, as Chrome a nd Firefox conti nue 
to fight for the highest version number, we're in a 
golden age of web development. Thanks to CSS3 and 
HTML5, designers are able to drastically reduce the 
weight 1 of their designs. Background images have 
been replaced with CSS3 gradients, while @font-face. 


much to every designer’s delight, has taken the place 
of sIFR (Flash-based fonts). Even the usage of the 
various new HTML5 elements helps to provide a tiny 
performance boost when querying the DOM. 

Though a saving of a few hundred milliseconds 
might not sound a lot rest assured, it can make all the 
difference. Besides, this Is your craft; if you won’t 
consider these sorts of things, who will? 


SO 


Jeanne 



























Ask yourself this: when was the last time that I read 
a webpage from top to bottom? It's very possible that 
your answer wil I be; never. We exist in a n e n vi ronment 
where immediate gratification is essential. Even an 
additional second can serve as the difference 
between making a purchase and/or moving on to the 
next source of input. 

In 2006, Google found that a ha If-second increase 
in page load speeds managed to reduce Its traffic by 
as much as 20 per cent. An isolated incident, you say? 
Not likely; Amazon came to the same conclusion 
when it learned that,as page load speeds increased in 
100ms intervals, revenue reduced substantially. 

Still not convinced? Well, it's been calculated that 
49 per cent of users will abandon a website or switch 
to a competitor after experiencing performance 
issues; if that doesn’t ring alarm bells, nothing will! 

Common pitfalls 

Un fortunate ly, much of the performa nee opti mi sation 
advice in the blogosphere revolves around 
techniques that, in all honesty, have negligible effects 
on performance. Here are a few of the main ones: 

1. Single vs double 

The majority of PHP developers will likely be familiar 
with the single vs double debate. For those unfamiliar, 
the basic argument goes that for performance 
reasons, it's better to wrap your strings in single 
quotes, rather than double quotes. The justification is 
that, because PHP won! need to detect whether 
variables are contained within the str I ng, pe rfor ma nee 
will improve as a result. 

Not only is this not true, but It takes the concept of 
pre-optimisation to an extreme. If designers would 
instead focus their energy on the file size of their 
images, they would experience dramatic 
improvements in performance. Tools like Smush.it 
( www smushit.com ] make this process a cinch. 



With Yahool's Smush.lt, you can automatically apply 
lossless com preplan to Images 


5mush.it w ill filter through a supplied set of images, 
provide lossless compression and return a ZIP file 
containing the collection of optimised images, 

2. jQuery selectors 

jQuery fans have undoubtedly read countless articles 
which recommend various ways to optimise the 
selectors that are passed to jQuery. Again, though, 
the truth is that as long as you are not obnoxious with 
your selectors, and pay attention to the fact that its 


selector engine - Sizzle - parses selector strings from 
right to left, jQuery does a fantastic Job of optimising 
the code as mu ch a s possl b le. 

In most cases, whether you're using chi Id rent) or 
flndO to hunt down a particular element won t even 
begin to have a perceivable effect This is not where 
your time is best invested. Certainly pay attention to 
performance, but focus on the right things. 

3. CSS selectors 

At one point or another, most of us believed the CSS 
universal * selector was terrible and should never be 
used. The truth is, when referenced by itself, this 
selector is no different to referencing any other 
element The performance hits begin when its used 
as a descendent selector, such as; content > *. 
Because CSS is parsed in a rlght-to-left format, ft first 
must obtain every element from the DOM and then 
determine whether each is a child of the element with 
a class of content. In these situations, you should 
never use the universal selector. 

However, should you need to perform an action 
similar to zeroing out the margin and padding for all 
elements, feel free to use it as follows; 


|001 * ( margin: fl; padding; fl; > 


Or perhaps you want to regain some sanity by 
returning to the days of yore and IE's old box model: 


0-01 /# Rapidly gaining in popularity this year 

*/ 

002 * { 

003 -webkit-box-sizing: border-box; 

004 -moz-box-sizing; border-box; 

005 box-sizing; border-box;_ 

006 } _ 


As long as you're working with a relatively 
maintainable website, there Is little to worry about. 
Remember, there are far, far bigger things to be 
concerned about before focusing your attention on 
CSS selector performance. 

Core contributor to WebKit, Antti Koivisto, couldn't 
have put it any better, when he said: '‘My view is that 
authors should not need to worry about optimising 
selectors (and from what I see, they generally don’t). 
That should be the job of the engine," 

Best practices 

A startling statistic worth pointing out at this point is 
that SO per cent of page loads are spent on the 
frontend - or in other words, the images, stylesheets 
and scripts that make our sites look pretty. 

Despite the ubiquitous bad advice that seeps out 
from the internet, companies like YahooE and Google 
have gone to great lengths to recommend a set of 
tried'and-true best practices, which should be 
integrated into all projects. 
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Optimising your code 


§f For those wary of toying with the 
command line, there are friendlier apps 
like LiveReload, CodeKit and SimpLESS :: ! 


some differences. Asa rule of thumb, it's important to 
test and optimise websites with both extensions. 


YSlow 

Ya hoc’ 's YSlow is a browser extensl on wh Ic h a nalyses 
your website and automatically detects hotspots, or 
areas where performance can be honed. It 
accomplishes this by conducting a range of tests and 
grading each A~F Your score for each test will 
ultimately be averaged into one final grade. 

Among other things, these tests will ensure that 
stylesheets and scripts are placed at the top and 
bottom of the document, respectively Doing so 
manages to achieve the illusion of a faster page load. 
You'll find that particularly in older browsers, scripts 
are not downloaded in parallel This translates to the 
rest of the page not being parsed until the script has 
fully downloaded. 

Perhaps most importantly, though, YSlow 
determines whether all assets - that is, the scripts and 
stylesheets - have been concatenated and 
compressed. Concatenation refers to the process of 
taking, for example, three HTTP requests, or 
stylesheet links, and then combining them into one 
larger file. This achieves a reduction of two HTTP 
requests, which may on the face of it appear to be 
Insignificant - however it's any thing but. 

In addition to concatenation, file compression - or 
gzipping - can reduce a file's size by as much as 40-70 
per cent. While various online compression tools are 
available, such as CSS Drive, it's far more efficient to 
assign the task of combining and compressing assets 
to your build tool of choice. Otherwise, you’ll likely 
waste hours over the course of a project's life cycle 
repeating this tedious process. 


Automation 

HTML5 Boilerplate recently exported its Ant build 
script to a separate project, hosted on GitHub. This 
script, among other things, will dynamically combine 
and compress assets, while ’automagically' updating 
the link and script references in your documents. 

Ben Alman created a command line tool, called 
G ru nt, w h ich is tailor made for JavaScri pt a pplications. 
Through the use of a grunt.js configuration file, the 
process of concatenation, compression and 
validation CJSHint) can be instantly executed each 
time that a project is saved. 

CSS preprocessors, like Sass, Less and Stylus, in 
addition to expanding the functionality of CSS, offer 
the ability to use multiple stylesheets during 
development - for organisational purposes - while 
ultimately exporting a single compressed stylesheet. 
For those who are wary of toying with the command 
line, there are a handful of friendlier apps available, 
including LiveReload, CodeKit and SimpLESS. 

In addition to Ya hoofs YSlow, Google offers its own 
performance tool called Page Speed, While this 
provides much of the same functionality, there are 


Similar to YSlow. Google Page Speed provides its own 
set of checks and balances lor a website 


Script loaders 

Resource loaders - such as yepnope.js - are an 
essential tool in every web designer's toolbelt these 
days. Because many of the newest HTML5 JavaScript 
APIs don't yet have widespread support, we use 
polyfills to ‘fill in the gaps’. Coined by Remy Sharp, 
founder of JS conference Full Frontal, a polyfill is a bit 
of code that fills in missing functionality gaps for 
older browsers - sort of like regressive enhancement. 

For Instance, while we can freely make use of 
native geolocation support in most modern browsers 
these days, the same certainly can't be said for older 
browsers like Internet Explorer S. In these cases, a 
polyfill can be used to mimic the Geolocation API. 

However, there is a file-size cost to these polyfills. 
Doesn’t it seem silly to import various poly fill scripts 
i nto an application when it's qu I te 11 kely that the visitor 
is browsing in a modern browser, which has no use 
for the polyfill? Of course it is, 

Lucki ly, resource loa ders e nable us to cond itional ly 
load assets, based upon a specified condition: If the 
browser does not provide native Geolocation support 
tnavigator.g colocation), then only on that condition 
should it load the geolocation polyfill script.' 

While yepnope.js is a standalone script it is also 
integrated into the popular Modernizr library, a tool 
that detects support for HTML5 and CSS3 features. To 
make use of it - referred to as Modernizr.load - a 




























































custom build of Modernizr needs to be generated. reduced - not to mention the fact ttiat you can finally 

Atthis point,conditionally loading assets Isessentlally break free from prefix hell! 

awalklnthepark. 


001 Modernizr.load({ 

002 test: Modernizr.geolocation , 


1003 nope: 
|fl04 }): 


J geolocationPolyfill.j s f 




This code instructs Modernizr to only load the 
geolocation Poly fil IJs script on the condition that the 
browser does not provide natlvegeolocatlon support. 
This way, visitors to your website don't have to pay' 
for the things they'll never make use of. 

Minimising CSS3 weight 

Al I web d esigne rs should be t hankf ul that the browser 
vendors experimented with the new CSS3 properties 
as early as they did. That said, were now at a point 
when a single property can require as many as five 
separate versions to achieve cross-browser 
compatibility which isnt ideal. As an example, tor 
CSS3 transitions, WebKit, Mozllla, Microsoft and 
Opera prefixes should be represented. 


.transition { 


-prefix-free 


-pttliK-Irtt lew fD> ui* witf unpnftiMl CSS puptrUtf 
(vtryvhtn It work* behind th* «*rwi. *d41ng the currciU 
brenrMr'f (WtH* tg taf CSS CC4e, Oftlf When If* nH#l 


U’.trnHMi Tmdfiw PA<J Hujiiu 


Limitation* 


002 

-H^bkit-transitionr all Is; 

003 

-moz-transition: all Is; 

004 

- 0 -transition: all Is; 

005 

-ms-transition: all Is; 

006 

transition; all Is; 

007 > 


With -prefix-free, you have the luxury of using the 
official syntax for the new CSS3 properties 

Waterfalls 

Monitoring the load cycle of a page is decidedly 
easier these days, thanks to tools like Firebug and 
Chrome Developer Tools. Often referred to as The 
waterfall' - and available via the Network tab In 
Chrome Dev Tools - the timeline provides vital 
information on the number of milliseconds required 
to load each asset. This can be used to detect and 
correct any major trouble-spots. 


The obvious downside to this is the fact that, 
particularly for larger, GSS3-heavy designs, the 
stylesheet’s file size will increase significantly. 


Prefixr 

CffigS-BiOHM CSS iff Swertris* 


gsspgvL... _ 



r aTrEEUTT" 



Achieve cross-browserCSS3 In seconds With Prefixr 

Though tools like Nettuts+ Prefixr make the 
process of writing cross-browser CSS3 as easy as the 
dick of a button, alternative JavaScript-based 
solutions, like -prefix-free, take a different approach: 
create your designs using the official syntax and, 
when the page loads in the browser, -prefix-free will 
detect the cu r rent browser and dyna mical ly a pply the 
necessary vendor prefixes to the properties. 

Though one hurdle to -prefix-free is that it's a 
JavaScript-based solution, a considerable advantage 
is that the stylesheet's file size can be significantly 


The timeline or waterfall' Is available via the Network 
tab in the Chrome Developer Tools 

Take it to the next level 

The subject of performance optimisation requires an 
entire book to detail effectively. This feature has only 
scratched the surface, in an attempt to whet your 
appetite. If you'd like to learn more, Steve Souders' 
(creator of VSlow) book, Even Faster Web Sites , is a 
vital resource. Be sure to also check out our box out 
on the right for more associated book and app 
suggestions for developers. On the other hand, 
should you desire the easy way out, HTML5 
Boilerplate (html5bQilerplate.com) Is a fantastic 
starting point that can boast a plethora of best 
practices with many of VSIow's performance 
recommendations baked Into the template. 



HANDY RESOURCES 

Recommended books and apps to 
complement the developer themes 
featured this month 


HIGH PERFORMANCE 

JAVASCRIPT 

£27/$35 

htlrv //orpi I lvrnrn 

This title by Nicholas Zakas 
promises to help you 'build faster 
web application interfaces' by 
revealing techniques for avoiding 
performance bottlenecks, 
Methods for optimising the way 
code is loaded into pages and 
practica I ti ps for strea m II n mg i 

listings at source are included. 





C® 




COFFEESCRIFTs ACCELERATED 
JAVASCRIPT DEVELOPMENT 
£22.50/$29 

http://DrapptQg.CQm 

CoffeeScript is all about making 
JavaScript leaner, with this 
book promoting the benefits 
via example-driven exercises 
Author Trevor Bum ham talks 
you through the building of a 
multiplayer game that leverages 
both jQuery and Nudejs to 
develop for both cl ient and server, ^ JP- 

using standardscompliant code. 

GUSTO-CODE EDITOR 
& FTP CLIENT 
£6.99/$9.99 

htipj'/iiQis£aiiiltli£iQab r mm fg\ i stn 

Available for iPad via the iTunes App Store this 
superb utility gives you the ability to edit and refine 
your web coding projects on the move. Designed to 
help streamline yourwurkfluw. it offers an attractive 
development environment with syntax highlighting 
tor over 20 languages Including ASR ColdFusion, CSS. 
HTML. JavaScript PHP and Ruby. 
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<Vutoiials> 


I Develop a secure loan with RoR: part 2 


R uby on Rails as a development 
framework provides web 
developers with the ability to easily 
generate powerful dynamic 
applications using relational 
mapping and the model view 
controller <MVC) patterns. 

Last month we created a simple 
blogging application from the ground 
up. generating the required scaffolds 
and controllers to manage blog post listings including 
admin functionality to edit and destroy entries. AH of this 
was handled with minimal coding and made use of 
Rails' built-in helpers and generation scripts to create 
the underlying architecture for each component. 

In this tutorial we will extend our blog application and 
add log-in authentication controllers to manage access 
to restricted pages. We'll see how to reconfigure routes 
to handle the authentication process and simplify URL 
endpoints for users. We'll also create a global layout for 
the application and have a look at creating a stylesheet 
powered by SASS for dynamic CSS generation. 


Adding gems 

For our authentication system we want to encrypt, or hash, any 
supplied passwords. Open Gemflle in a text editor and add gem 'berypt-rub/ 
to the bottom. Once saved, open your Terminal window to Install the bundle 
and make sure it has been included. You can then launch the Rails server. 

001 > bundle install 

002 > bundle show betypt-ruby 

003 > rails server 

User scaffold 

We need to create a new scaffold for user data. We'll store the name 
and a hashed password in the database instead of a plain string. Once the 
scaffold is done we migrate the changes to the database. Manage this with the 
built-in rake helper and run these commands in the Terminal window. 

001 > rails generate scaffold User name:string password. 

digest-string 

002 > rake db migrate 

User model 

Let's add the definitions to our user model now. Open app^models^ 
userstb and enter the validation rules within the class. We need to ensure that 
a name has been supplied and is unique. Rails will manage our secure 
password for encryption and password confirmation boxes on the frontend. 

001 class User < ActiveRecord::Base 

002 validates ;narne ; presence: true, uniqueness; true 

003 has.secure.password 

Editing controllers 

Open a pp>controllersHJse rs.control ler.rb and a mend the create a nd 
update definitions. When a user is created or edited we'll return the admin user 
to the main users listing to display all of them instead of showing a specific 


user record. We can do this by changing the redirect.to value for the HTML 
actions, pointing it to the users.url location. Find the full code on the disc. 

001 def create 

002 &user - Use r. new (pa rams [: user]) 

003 respond.to do | format! 

004 if frjser.save 

005 format. ht ml { redirect. to users.url, notice; 'User 

was successfully created. r } 

006 format, j son { render json: @user t status: :created, 

location: @user } 

007 else 

003 format, html { render action; "new' 1 } 

009 format, json { render json; frjser, errors, status; 

: unprocessable.^tity } 

Amend the display 

v • Open app>views>users/index.erb and delete the table header and row 
that would output the hashed password on the screen. Beneath the hi tag 
add a conditional statement to output a notice variable If It exists, which will be 
returned from the user controller after a successful update to the database. 
Once again, the full code is on the disc. 

001 <% if notice %> 

002 <p id="notiee ,J x%^ notice %x/p> 

003 <% end %> 

Password input 

Rails can automatically handle password confirmation when entering a 
record. Open app>views>users>form.html.erb and replace the password, 
digest form field with two new fields: (password and password.confinmation. 
Get the complete step code on the CD. 


001 <div> 

002 Mabel 


;password, 'Password' %>; 


Develop a 
secure login 
with RoR 

We continue our short series on RoR 
with a look at applying authentication 
and user management to your 
formative Ruby applications (part 2) 

tools I tecli I trends Code editor, command line. Ruby on Rails 3.2 
exiiert Matt Gifford 
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r lUieb- 

tdeveloper; 

Develop a secure login with RoR part2 



003 <&= f, password-field ;password, size; 40 %> 

004 </div> 

005 <div> 

006 <%= f. label : password-confirmation , 'Confirm' *%>: 

007 <%= f .password-field ;password-confirmation, size; 4& %> 

00S </div> 

Authentication 

v ' To control access to our administrative areas we need to create two 
different controllers. The Sessions controller will handle persisting, logging in 
and logging out an authenticated user, while the Admin controller will act as 
the welcome screen for logged-in users. Run the following commands in your 
Terminal window to generate these controllers. 

001 > rails generate controller Sessions new create destroy 
007 > rails generate controller Admin index 

Defining actions 

Add the authentication actions to the Sessions controller. Open 
app>controllers>sessrons_cohtroller/b and include the following code within 
the create definition. For an unsuccessful authentication attempt, we will 
redirect the user back to the log-in area byway of a friendly error message. 
Similarly, for logout, we also need to destroy the stored session user ID 
and redirect back to the homepage. 

001 def create 

002 user = User .find_by_nairie(parairis[: name]) 

003 if user and user„au th en ticate(paramsf: password]) 

004 session[;user-id] = user. id 

005 redirect-tc adminjurl 

006 else 

007 redirect_to loginjjrl, alert; "Invalid user/password 

combination 1 ' 

00S end 
009 end 

010 def destroy 


011 session[ ;user_idj = nil 

012 redirect_to home_url, notice; J 'Logged out 1 ' 

013 end 

Log-in form 

Open app>views>sesstons>new.htiTil.erb into which well add the log-in 
form to allow for authentication. In this form we are not relating directly to any 
model object, but we can make use of some helper methods to create the 
form, text input and password input fields on our behalf. 

001 <% if flash!:alert] %> 

002 <p id-'notice'' x%= flash[: alert] *x/p> 

003 <% end %> 

004 <div i ds" log in-form‘'> 

005 <h4>Please Log IiK/h4> 

006 <fieldset> 

007 <label forename' 1 >Mame:</label> 

008 <%= text_field_tag rname, parans[:name] %> 

009 </fieldset> 

010 <fieldset> 

011 root : to => 'heme# index ' t as: 'home' 

012 <label for=" password" >Password :</label> 

013 <%= password-field-tag : password, pa rams [password] %> 

014 </fieldset> 

015 <%= submit-tag "Login 1 ' P ; class -> "button button-pi nk r, %> 

016 <% end %> 

017 </div> 

Include routes 

Our generated controller created some simple routing options for our 
Sessions and Admin requests. We will redefine them ourselves to manage the 
login/logout. Open config>routes,rb and delete the generated routes for 
sessions. We can now set new routes for the Sessions and Admin controllers. 
Find the complete set of code on the disc. 

001 get 'admin' => "adminffindex" 

002 controller :sessions do 
003 get 'login' => ;new 
004 post ‘login 1 => ; create 

005 delete ‘logout' => r destroy 

Limiting access 

We now turn our attention to restricted areas. Open app>controllers> 
application_controller,rb and assert that all actions must run the authorize 
definition before a request filter is processed, This will check for an existence 
of the user ID in the session scope and, if not found, force the user to log in. 

001 before_fliter authorize 
002 def authorize 

003 unless User ,f i nd_by_id{session[ : user_id]) 

004 redirect-to login_ijrl ? notice: "Please log in" 

005 end 

Public areas 

We need to allow for some publicly accessible areas of the site that 
don't force login. To do this we can use the skip_before_fiIter function, which 
will bypass the default application behaviour set in the previous step. Add the 
following line in the Sessions and Home controller files. 

001 skip_before_fiIter authorize 
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I Develop a secure loan with RoR: part 2 


Create the layout 

Open app>vlews>layoufcs»applicatlonJTtmLerbt which provides 
the default layout for pages within the app, In the head tag we can 
make use of RoR functions to load the default stylesheet and 
JavaScript as well as create a C5RF token to assist in protecting against 
XSS attacks. The full code can be found on the cover disc. 

001 <head> 

002 <!— META Tags — > 

003 <meta charset-'iiitf-0 J > 

004 <meta name="description" content=""> 

005 cmeta name= u author” content=" u > 

006 <meta name= J VLewport J ' content=’Vidth=device- 
width,initial- scaled J "> 

007 <[—Title—> 

008 <title>Ryby on Rails Blcg</title> 

009 <%= stylesheet_lin,k_tag '’application 1 ' &> 

010 <%= javascript_include_tag '’application 1 ' %> 

011 <%s csrf_neta_tags 

012 <!—HTML5 IE Fallback—> 

Getting SASSy 

Ruby on Rails provides developers with the ability to write CSS 
files using the SASS syntax and nested elements. This can really help 
with maintenance and management as well as improving readability. 
Rename app>assets^stylesheets>application.css to 'applicationoss.scss' 
and then add the provided CSS styling. Complete code is on the CD. 

001 footer { 

002 cl ear: both; 

003 text-align;center; 

004 padding;30px; 

005 line-height;20px; 

006 color: #8 IS 38 3; 

007 p { 

008 color:#989898; 

009 } 

010 ill li {> 

011 ul li { 

012 1 i st-style;none; 

B Dynamic navigation 

IP 7 Open app>views>iayout>application.html.ert} into which we'll 
add a navigation menu to the global template, By searching for the 
existence of a specific user ID value within the session scope we can 
display the relevant menu options depending on whether or not the 
user is currently logged in. 


001 <ul> 

002 <lix&= link_to 'Home', home_path 3£x/li> 

003 <% if session!:(jser_id] 

004 <Iix3t= link_to 'Posts', posts_path £x/li> 

005 <1 !><;%= link_to 'Users', users_path %X/li> 

006 <li><;^ link_to 'Logout", logout_path, method: 

: delete 5X/li> 

007 <% else %> 

008 <lix^ link_to 'Login', loginjpath, method: :get 

KX/li> 

009 <% end S> 

010 </ul> 



Code library 

In detail 


Let s take a closer look at some of the core 
features available in the Rails environment 


With SASS powering the 
stylesheets we canuse 
variables, mix!ns and 
functions in our CSS 
pages todefine vari ables 
and streamline the code. 


001 $gray; #919191; 

002 Spink; #ea4c89; 

003 f^nixin margins (S#iargin_params) { 

004 margin; $margin_params; 

005 } 

006 

007 iSmixin hex shadow ($boxshadow_pa rams) { 
008 -wobkit-box-shadow; Sboxshadow.params; 

009 -noz- box-shadow; $boxshadow_pararns; 

010 -o-box-shadow: Sboxshadow_params; 

011 box-shadow: Sboxshadow_params; 

012 } 


Route configuration is an 
Incredibly powerf ul and 
Important part of RoR 
applications, Here we can 
map one controller to 
another and create 
detailed URL mappings, 


001 controller ;sessions do 
002 get 1 login’ => ;new 
003 post 'login" :create 

004 delete 'logout' => :destroy 

005 end 
006 

007 match 'post" => 'home#index' 

008 match 'post/:id" => £ home#show", :as => 
; shoppes! 


Ruby on Ralls contains a 
superb set of helpers to 
assist in development 
Here we make use of the 
form tag helpers to 
quickly generate form 
elements for us. 


001 <fi eld.se t> 

002 <label for=’'name Jr >Name:</label> 

003 <%= text_field_tag :name, param$[marne] 
004 </fieldset> 

005 <fieldset> 

006 <label for=’'password 1 ' 5passwc>rd:</label> 
007 <%= password_field^tag :password, 
params[:password] %> 

008 </fieldset> 

009 <%= submit_tag "Login", :class => "button 
button-pink"' %> 

010 end 
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An in-depth 
introduction 
toJSON:part2 

Building on last month’s tutorial, learn 
how to add a Twitter feed to your 
page using JavaScript Object Notation 

tools I tecli I trends Text editor (eg Dreamweaver; not Microsoft Word] 
and a web browser ojqwiits Eric Freeman, Elisabeth Robson 



I n the previous tutorial you saw how to 
generate JSON strings for practically 
any JavaScript object and how to 
re-create objects from those strings. 

Using JSON. you can stash objects in the 
browser's local storage for later use. 

In this article we're going to take this to 
the next level by retrieving JSON over the 
network from web services, and then 
using those objects an our JS code. Wore 
specifically, you're going to make use of Twitters web 
service to place a Twitter feed right into your page. 

First we'll write code to take a JSON object containing 
tweets and display those In a webpage. Next, we'll use a 
protocol named JSQNP to retrieve a set of tweets. As 
you'll see, JSOMP can be used to fetch data from a 
remote service without worrying about any cross- 
domain security issues. Finally, well put all this together 
and display live tweets each time the page is loaded. In 
our example we’re retrieving the most recent tweets 
from @WebDeslgnertviag;, but once you've got the 
hang of it. you can tap Into any tweet timeline you like. 


Begin with a list... 

Start by creating an HTML file that contains a simple body with an 
unordered list Clines 1Q-T1). where you'll be putting the tweets after youVe 
retrieved them. You'll find the file, along with the CSS code to go with It. on 
the resource disc included with this Issue. 

001 <!doctype html> 

002 <html lang- PJ en''> 

003 <head> 

004 <title>Web[)esigner Tweets</title> 

005 <neta charset=' , utf-S M /> 

006 clink rel-''stylesheet ,r href="tweets,css 

007 ^script src= "tweets, js"x/script> 

008 </head> 

009 <body> 

010 <ul id- ,J tweet sList H > 

011 </ul> 

012 </body> 

013 </html> 

Write a function to handle the tweets 

^ Now start a function named processTweetsO to take the tweets and 
display them; well worry about retrieving the tweets in a bit. Go ahead and 
add this code to the 'tweets!s' file (well fill in the code in step 4): 

001 function processfweetsftweets) { 

002 } 

Understanding Twitter’s JSON 

To write the function processTweetsO. you first need a basic 
understanding of how the Twitter feed works. Using your browser you can 
request any user's timeline in the JSON format. Let's take a look at an example 
by entering this URL Into your browser Wltter.CQm/staluSSS/yser 

11 me I i ne/webd es ign ermag. json. 


Below is roughly what you'll find. We’ve removed some of the properties so 
you can see the structure more clearly; the complete data is on the CD. 

001 [ 

002 { 

003 lp pi ace' 1 mull, 

004 ,H created_atV'Wed Jan 18 19; 12:46 +0000 2012", 

00 5 " retweet_coun t Jf : 5 , 

006 "user'': { 

007 l 'followers_count i, :149S4 J 

00S "p rof i 1 e_image_u r 1'V'h t tp : V Val. t wirng. com\ /prof i le_ 

i mages VS2 269786 7\/webdes_lQgo_normal, jpg'", 

00 9 " statuses.coun t 1 11 ; $4 6 , 

010 "name 1 ";'^ebiJesignerMag 1 ', 

One of the things you might have noticed in the previous tutorial is that JSON 
is easy to read and understand. The JSON from Twitter is in the form of an 
array of tweets - each tweet with its own properties including the user's 
screen name, the text of the tweet, what time they tweeted and much more, 

Writing the processTweetsO function 

™ ' Now that you know what Twitter's JSON looks like, you can start filling 
in the processTweetsO function. Essentially the function takes an array of 
tweets and displays them in the page. First get the tweetsList <ul> where 
you'll be adding the data Cline 2). then use a for loop to iterate through each 
tweet in the array passed to processTweetsO (lines 5-8). 

001 function processTweetsOtweets) { 

002 var ul = document .getElementById(''tweetsList'') ; 

003 

004 // add all tweets to the tweets (menu 

005 for Oar i = 0; i < tweets.length; i++) { 

006 var tweet = tweets[i]; 

007 // code to display each tweet here 
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00S } 

009 > 

Display tweets in the page 

To display a tweet, use a list element in the tweetsList like this: 

001 <lixdiv claas^"tweet"Xspan class=''tweetTe):t J '>tweet text 
goes here</spanX/divX/li> 


In each <ii> element, well add a <div> and a *span> with an embedded tweet 
(see the CSS included on the cover disc for styling). 

Insert the HTML 

Next. write the code to create and insert the HTML into the tweetsList 
list. Create a new <\\> element for each tweet (line 9), write the <dfv> and 
<span> elements to match the format above, add the <span> to the <div>. the 
<d\v> to the cli^and finally add each tweet item to the tweetsList cul>. You 
can find the full code for this step on the disc. 

@01 function processData(tweets) { 

002 vac ul - document-getElementByldC"tweetsList' 1 ); 

002 

004 U add all tweets to the tweets menu 
005 for (var 1=0; 1 < tweets,length; i++) { 

006 tweet - tweets[i]j 

007 

008 // create list item element 

009 var li = document.createElement( J 'li"); 

010 

Retrieving tweets 

* One way you can retrieve data from a web service with JavaScript is by- 
using the XMLHttpftequest method (also known as AJAX). Only there's a 
problem with using AJAX: it enforces security measures that prevent you from 
making a request if your page and the web service you want to contact aren't 
located within the same domain. Twitter isn't likely to host your page on its 
site, or to go through a lot of security configurations to support your page so 


XMlHttpRequest simply isn't a viable option for retrieving tweets. If you aren't 
familiar with XMLHttpRequest, no worries, as we won't be using it here. 

Introducing JSONP 

JSONP is a simple protocol you can use to retrieve data that gets 
around these cross'domain security issues. Well warn you now, it's a little 
convoluted. That said, it is widely supported and well worth the effort to learn. 
The first thing to know about JSONP is that it uses a <$cript> element to 
retrieve data - note that when the browser sees a <script> element with a URL 
in the sre attribute, it automatically downloads the JavaScript at that URL In 
fact, that JavaScript can be a JSON string, so you can use a ^cript> element 
to retrieve JSON data. Here's an example: to retrieve the JSON using the 
Twitter URL we used above, you can use a script element like this: 


001 fescript $rc= J 'http://twitter.com/statuses/user.timeline/ 
webdes i gnermag, j son '*></ scr ipt > 


How JSONP works 

-" Now, you might be thinking, 'That's great, but how do I get my hands 
on the JSON that the <script> element retrieves?’ And you'd be nght to ask. 
This is where JSONP gets a little convoluted. To access the JSON retrieved by 
the <script> element, you need to supply one more piece of the URL: a 
callback function that can Lake the JSON as an argument when it is obtained. 
With Twitter, you provide the callback function like this: 

001 <script src="http;//twitter.com/statuses/user._tincline/ 
webdes i gnermag. j son 7cal lback=processTweet s ’x/sc r ipt> 


to The meaning of the ‘P’ 


If you type the URL above into the browser you'll see that the JSON 
tweet data u now wrapped m a function call to the function processTweetsO, 
That function call wrapping is known as 'padding 1 (the F in JSONP), Note that 
the results tram Twitter are just like any other JavaScript you retrieve using the 
<script> element - the browser runs that JS code just like it would any other. 
When the browser runs the JavaScript it gets from Twitter, it will call your 
processTweetsO function and pass in the JSON data for the tweets. 


The handler 

Fortunately you've already written a processTweetsO function that 
knows just what to do with the array of tweets. Think through how this works 
again before going on: first you use a cschpt> element to retrieve the JSON at 
the URL above. Further, you supply a callback function, and once the JSON is 
delivered it is passed to that function - in this case. processTweetsO, which 
handles the data, (Note that you don't have to explicitly JSON.parseO the JSON 
that's retrieved; that is handled for you by the <scnpt> element) 


Putting it all together 

To see this all in action, add the <script> element to your HTML at the 
bottom of the page. The full step code is on the disc. 


001 <!doctype html> 

002 <html lang= J 'en' J > 

003 <head> 

004 <title>WebDeslgner Tweets</title> 

005 <meta charset= w utf-8'' l> 

006 <link rel= M stylesheet 1 ' href= Jh tweets.css Jh > 

007 <script src=" tweets. j s"X/script> 

008 </head> 

009 <body> 

010 <ul id=“ tweetsList ,f > 
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Give your cade a test run by loading it into your browser, You should see 
tweets from @WebDesignerMag now appearing in the page, 

Utilise the other data 

'• ®r There is lots of other useful information included in each tweet object 
that you can access using processTweetsQ. For instance, you can get the 
user’s screen name and profile image. Let's add the user’s profile image to 
each list item, and use the screen name as the alt attribute. First, create the 
new image with the src property and the alt property set using the tweet.user 
properties profilejmage_uri_https and streen_name r respectively, and add the 
image to a <div* element with the class 'tweetlmage'. Finally, add the 
tweetlmage <d\v> to the <li> element. 

001 function processDatattweets) { 

002 var ul = docutient.getEleirientById(''tweetsLi5t J '); 

003 // add all tweets to the tweets menu 

004 for (var i = 0; i < tweets r length; i++) { 

005 tweet = tweets[i]; 

006 H create list item element 

007 var li = document.createElement( rt li')j 

008 // create div for img 

009 var diving - dccutient.createElement("div' J ); 

010 div Irng. se tA ttr ibute ( ,J class" „ " tweet I mage *); 

011 // create img 

012 var img = document.createElement("irng 1 "); 

013 img.settttributeCsrc", tweet.user.profile. 

image_url_https); 

014 img.setAttribute C alt J \ tweet„user.screen_nane); 

015 d iv Img. appendCh i Id (img) ; 

016 

017 if create div for tweet text 

018 var divTweet = document . createE lenient ("div' 1 ); 

019 divTweet.setAttribute( M class Jf f W tweet jl ); 

020 N create span for text 

021 var spanText = document.createElementf''span"); 

022 spanText.setAttribute("class", M tweetText J> ); 

023 spanText.innerHTML = tweet.text; 

024 divTweet , appendChiId{spanTex t); 

025 1i, appendChiId(divImg); 

026 1i. appendChiId(divTweet); 

027 

028 // add list item to list 

029 ul.appendChild(li); 

030 } 

031} 



Load the page again and you should see @WebDes*gnerMag tweets in 
the page, along with the profile image of this Twitter user. 

Update tweets automatically 

Currently your code fetches tweets only once, To see new tweets, you 
have to reload the page, Wouldn't it be nice if your page automatically 
updated every so often? To do this, you need to insert the <script> element 
with the JSONP URL with JavaScript. When you insert a *script> element into 
the page (in the DOM), the browser sees that a new <script> element has been 
added and collects the code at the URL. Because that code happens to be 
JSONR this causes the processDataO function to be called. To get the page to 
automatically fetch new J50NP data, you can use a timer and call a function 
that adds a new <scrlpt> element to the page every time that it's called. 


Insert the <script> element 

With the new function, insertScriptO. you'll create the <script>element 
on the fly and add it to the DOM. Before you start writing the new JS, you 
need to remove (or comment out) the existing <script> element in your HTML; 
we won't need that any more as we'll be adding the <script> using JavaScript. 
You’re going to add the <script> element into the <head> element of the page, 
so the first step is to get the <head> element (line 2). Notice that we're using 
document.getElementsByTagNameO and choosing the first item from the 
resulting array, because you should only have one <head> element in your 
DOM! Next, create a string with the correct URL. write in the new ^script* 
element (line 4) and use the URL string as the value for the src attribute (line 
5). You can then apply the new <script> element to the <head> (line 6). 

001 function insertScriptO { 

002 var head = document. getElemerit5ByTagName( J 'h£ad , ')[0j; 

003 var src = ir http: //t witter.car/atatuses/user.tiinelineZ. 
webdfeiffftftrfflaff. -fsonTcallback^processPata"; 

004 var j son Script = document .createEl ementf 1 ' script Jt ); 

005 j son Script. setAttr ibute ( fJ s rc" , src); 

006 head.appendChiId(jsonScript); 

007 } 

Test the insertScriptO function 

Before you add the timer, you first need to test insertScriptO, To do this, 
add an onload function that calls insertScriptO at the top of vour JS code (lines 
1-3). This function will run as soon as your page loads. Once you've added this 
function, test the code and see if you get tweets correctly. 

001 window.onload = functionQ { 

002 insertScriptO; 

003 } 

Perfect timing 

The next step is to add a timer function to call insertScriptO repeatedly, 
so your page updates automatically Add a call to setTimeoutO at the bottom 
of the insertScriptO function. The timer is calling InsertScriptO again, so 
whenever InsertScriptO is called, a new timer is created to call insertScriptO 
the next time; that wav InsertScriptO will keep running until you close the 
browser page. We've used the timeout value 25000, which means 
insertScriptO will be called every 25 seconds. (Note that TwitLer sets a rate limit 
of ISO requests per hour, so you can set it lower for testing purposes, but then 
you’ll want to set it to 25 seconds or higher for real-world use.) 

001 // Append line below to bottom of insertScript 
002 setTiineout(' J insertScriptO ; ", 25000); 

003 } 

Out with the old 

Now that you're calling insertScriptO repeatedly, we need to do one 
more thing to make sure that the page works correctly. Look back at where 
you are adding new tweets to the page in insertScriptO; 

001 ul.appendChild(li); 

Unless you remove the previous tweets from the list, the tweets you get when 
you call insertScriptO again will be added to the page. That means you'll see a 
lot of the same tweets twice or more times. To fix this simply add a loop at the 
top of insertScriptO that removes all the tweets in the tweetsList <u\> before 
adding the tweets resulting from the most recent JSQNP call. As long as the 
<ul> contains a child (line 5). remove it dine 6). Find the full code on the CD, 
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001 function process[>ata(tweets) { 

002 var ul = document ,getElementById( r 'tweet5Li5t r ') ; 

003 

004 // remove existing children before adding new ones 

005 while {uL.firstChild} { 

006 ul.removeChild(ul,f i rstOhild); 

007 } 

00S // add all tweets to the tweets menu 

009 for (var i - 0; i < tweets, length; i++) { 

010 tweet = tweets[i]; 

We have a problem! 

If you test your code and -compare the tweet results with the tweets 
you see directly on Twitter, you might notice that you're not seeing new 
tweets. Why? The problem is that you're inserting the same <script> element 
each time. Most browsers these days are smart about caching, so your 
browser will very likely look at the new <script> URL and realise it's the same 
URL it just fetched a few seconds earlier. It will then use the data it retrieved 
and helpfully cached for you as the result of the call to the ^script* src URL. 
Except that you don't want the browser to cache this data because that 
means you'll never see new tweets... So how can you get around this problem? 
Well, you can fool the browser into thinking you have a new URL each time by 
adding a random number on the end, like this: 

001 http:?/ twitter, com/s tatuses/user.tineline/webdes-igrierniag. 
json?callbackup r ocessData&l326507461201 



Add an IDto the new <script> 

To make the existing JS0MP <script> element easy to find and remove, 
you can add an ID attribute to the <script> each time you create it. Give the 
C5ciipt>the ID 'jsonScript'. 

001 jsonScript. set At tribute ( 11 id", JF jsonScript 1 '); 

002 jsonScript. set At tribute ("'src 1 ', src); 

003 head.appendChild( j sonSc r ipt); 

004 

005 setTimeout("insertScriptQ; N , 25000); 

006 > 


What’s the time? 

We'll use the current time in milliseconds to generate the random 
number that will be added to the end of the URL. Why is this a particularly 
goad number to use? Because it is unique and. unless you use a timeout value 
of one millisecond or less in your setTimeoutO function, you can guarantee it 
will never be the same as the previous value. To get the current time in 
milliseconds, utilise the Date object's getTimeO method (line 3). Then simply 
append the value to the end of the URL Cline 4). Make sure you add an 
ampersand (&} to the end of the URL string to separate the callback function 
name from the random string. 

001 function insert$criptQ { 

002 var head = document,getElenientsByTagNaine(' l head' ,J )[0]; 

003 var random = (new DateQ).getTimeO; 

webdssignarmag.j son?callback=p rocessDa taft" + random; 

005 var jsonScript - docuntent.createElement("scr i pt"); 

006 jsonScript.setAttributeQsrc" r src); 

Test test, test 

v •* v If you reload the page, you should now see new tweets as they come 
in. Feel free to change the user ID in the URL above to a different one, like your 
own, if you want to be able to test your application more easily (since 
@WebDesignerMag may not post that frequently). 

Clearyour<head> 

You may already be wondering about the number of <scripl> elements 
in the 4iead>, because we're adding a new <script> element every time 
InsertscrlptO is called, so if you set your timer to call lnsertScrlptO every few 
seconds, and you leave the page loaded for a while, the <head> element in the 
page is going to get very full. Too many < script- elements will slow down and 
possibly even crash your browser, so let's add some code to clean up the 
<head> element and remove the old <script> each time we add a new one. 


Remove the old jsonScript 

Next, you need to remove the old jsonScript <scnpt> each time you 
add a new one. The first time you run your application, there will be no 
jsonScript <scnpt> yet. so you also need to test to make sure it's not null before 
trying to remove it, So first, try to get the jsonScript <script> element from the 
DOM (line 2). and then test to see if it exists (line 4). if it does exisL erase it from 
the DOM by removing the element from the <head> element using ttie 
removed hi IdO method (line 5). Now when you add the new <script>, it will be 
the only jsonScript <scrlpt> element in the <head>. and your <head> element 
will stay uncluttered. The complete code is on the CD. 

001 function insert$cript() { 

002 var jsonScript = document.getElementById( Jf jsonScript Jf ); 
003 var head = document. getE lenient sByTagNameC" head") [0]; 

004 if (jsonScript) { 

005 head.removeChiId(j sonSc ript); 

006 ) 

007 var random = (new DateQ) .getTimeO; 

008 var src = lp http;//twitter,can/s tatuses/user_t 1 mel 1 ne/ 
webdes i gnermag, j son ?cal 1 back=proce5sDatagr fl •*■ random; 

Final test and homework 

Test your code one last time. Leave the page open for a while to see if 
new tweets come in. Try a few different user IDs of your favourite tweeters in 
the URL. To test your JSON and JavaScript skills, see if you can use another 
property from the tweet data. You'll have to dig through the da La you get from 
Twitter using the original URL - http://twitter.com/statuses/user timeline/ 
wehdeslgnermag.json to see if you can parse the JSON data and figure out 
how to access the property you want to use. We've included a solution in the 
file , tweets_homework.js' to get the created_at property (the date and time of 
the tweet) and properly format it by converting the string to a JS Date object, 
and pulling out just the information we want to display. Try working on getting 
the created_at property yourself, or pick another one if you prefer. 
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Forrest Tanaka 

web http://forrest-tanaka.com 


Cnrrentrole Web designer/developer and photographer 
Education BSc In Computer Science 
Expertise 1 41M L4. XHTML HTML5. CSS. CSSS, JavaScript 
PHR WordPress. Photoshop. InDesIgn. illustrator 
Dreamweaver, MAMP 

Clients FLAX art & design, Peter Barm David Tomb, Frodo 
Joe's Petit Cafe, Pacific Color Graphics 
Twitter ©FornestTanaka 


Forrest Tanaka appreciates websites that 
make the web a better place to be - clear to 
navigate, clean of clutter; generally a more 
beautiful place to get stuff done quickly. All 

his designs follow this philosophy and it serves 
his clients' needs well. 

Tanaka started designing websites in his 
hometown of Pleasanton, CA. just out of 
curiosity. Very quickly the beauty and clarity of 
some websites and the shortcomings of 
others began to direct his designs. 'That which 
isn't needed should be deleted’ became his 
maxim. Finishing a site fitting that goal brings 
the greatest satisfaction to this designer. He 
now specialises in web design and 
photography for a range of businesses. 

Content management systems became an 
obvious place to expand into, but the 


complexity of Drupel and Joornla left Tanaka 
disappointed. He then investigated WordPress 
and virtually everything changed; it had the 
right level of complexity and simplicity for 
both him as a developer and his clients. 

From 2010. every site he designed used 
WordPress to drive it His clients appreciate the 
ability to edit their content and he appreciates 
the platform's ability to provide the right tools 
for virtually any job at hand. 

Going forward, Tanaka studies HTML5 
features that can take even more advantage of 
computer hardware. Responsive websites 
need more exploration, as he feels they often 
lead to sites that don r t serve their visitors well. 

The web Is mature, but Tanaka feels 
businesses on the web are only in their infancy, 
and he is excited for what the future holds. 
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01 

This reflects the restauran t's warm 
atmosphere and shows the same 
graphics as at the establishment. 
The curved navigation leads to the 
food imagery Tanaka also shot. 


02 

Tomb's site is all about his work, 
so the splash screen is filled with 
a big painting and his homepage 
has a number of other pieces, all 
without big download times. 


03 

This art supply store often boasts 
new products and the site allows 
them to display WP posts on the 
homepage. There's the option to 
add new sections via WP too. 


04 

Patients' comfort was the mam 
theme, so this Site features soft 
gradients and a fading navigation. 
Tanaka also supplied the logo and 
much of the photography. 


05 

Barto's site shows off his voice 
talent with HTMLS video and 
audio players that work across 
all modem devices. It features a 
distinctly minimalist design. 
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AmitDas 

web www.kriainteractive.com 


Current role Founder, designer and developer at Kria I nteractl ve 
Education Bachelor of Engineering in Information Technology 
Expertise Adobe Illustrator and Fireworks. Dreamweaver, Coda. 
HTML CSS. Word Press. JavaScript and more 
Clients Subway India Minority Review. Hard Candy Fashion 
Twitter @Godgeez 


Amit Das is a web designer and developer 
with experience ranging from visual design 
to user experience and on to both front-end 
and back-end development. 

After working with a leading design agency 
In Mumbai, he decided to start out with his 
own web-design firm - Krla Interactive - in 
2010, based in Pune in central India. 

Das has been fortunate enough to work 
with some of the most prominent brands in 
India in the fashion* real-estate* eCommerce 
and creative startup industries. For most of 
these projects, he was responsible for the 
websites from day one - from the very first 
concept all the way through to launch. 

He has always liked putting across ideas 
that successfully manage to be both visually 
appealing and informative. He sees the web as 
an accessible platform for these ideas to be 


put to use and be of use. Designing for the 
internet allows him to constantly learn new 
technologies through an interesting creative 
process* one which transforms a humble 
rough draft to a dynamic working website. 

He has recently been Inspired by Ethan 
Marcotte's brilliant take on responsive web 
design a revolutionary concept for adapting 
web layouts across all desktop and mobile 
devices. He follows A List Apart and the 
WDMag blog to stay up to date with all the 
latest web-design trends. 

Apart from designing sites. Das likes to read 
design blogs, web-design books, sketch 
monsters in his molesklne notebook, write 
informative articles on his blog (htto:// 
godgeez.com) and play foosball 

Currently he lives in Pune* where he runs his 
small design studio from home, 


Kci«:n:«nicmt$tudlQ( 




Wc arv aiming far a Webby/ thcFWA very soon! 

Web dudes @ Kria 


Due nrvleii 

C1 |«nU 
C#r**E* 

G*t in touch 


HELLO! WE ARE KRIA. 


QOOQOO 


SMJflT SEASONED PEOPtl 

Cfl TO BPTTrft f£AS FA$Tfft 

W£ ART THQ5£ INDIVIDUALS 

UNDER 

THE SAME ROOF! 

KICK A&& 

WEB DIGITAL 

TO PROMOTE YOUR 
BUSINESS 

WE DO BRANDING WITH 


OUR FAVORITE WORD 

WEBADIGN 

+ + 

WEB 

AD 

IGN 


WE ALSO PUT WORD 

FACTS S STATS 

JUHUTTHi cm; MD PEOPLE 

WORKING HERE! 

MOST OF THEM 

ARE FAKE 

f mim 


O wwwkrulntprafrluprom tv? 



Ol 

Minority Review & a content- 
heavy site designed for easy 
access to its reviews, features 
and updates. A customised WP 
panel offers effortless updating. 


02 

The Hard Candy homepage is 
based on a semi-fluid layout. It 
displays apparel category 
thumbnails and also features 
language-switching options. 


03 

The website has earthy tones 
and lots of Vidya Warli art. Being 
an MGQ. the contribute and 
volunteer functionality had to be 
pointed up prominently 


04 

Holy Ghost DHM and Football 
academy is designed to provide 
users with info on the ministry 
and academy with videos* the 
church schedule and more. 


05 

Fireworks, HTML and CSS combine 
to present an infographic-style 
user interface. The icon and shape 
themes have been used to keep 
the content light and interactive. 


porLloUQ 
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Adeo Group 

www.adeQarouo.to.uk 


Originally graphic design focused, Adeo 
was one of the first companies to recognise 
the potential of next-gen eCommerce,and how 
combining attractively designed websites with 
powerful internet marketing strategies wouid be 
a sound recipe for businesses everywhere to 
enjoy huge profits. However, Adeo also strives to 
make all of its clients feel fully supported and 
oomfor table wl th thel r webs i tes; its a I m I s to be 
a company with the human touch. 


T he city's shopping and theatre district 
reflects a new focus on recreation and 
the arts, and the shopping malls are second 
only to London's, but can Glaswegian web 
design size up to its leisure industry? 

Buchanan Street is Glasgow's main 
shopping precinct and has been voted the 
seventh best shopping area in the world, The 
city holds an Impressive retail portfolio and, as 
well as the high street stores, the St Enoch 
Centre and Buchanan Galleries offer a 
selection of designer wear. 

The merchant city area was regenerated 
back in the Eighties and its warehouse 
conversions have transformed this industrial 
district to a much sought-after property area. 
Many caf^s and restaurants have been 
recently opened and this neighbourhood 
actively celebrates diversity. 

Glasgow's West End is the city's culture and 
education centre. In this bohemian district, 
there is a wide range of museums - very few 
of which charge entrance fees. Must-sees are 
the KelMngrove Art Gallery, the Hunterian 
Museum and the Museum of Transport 
Glasgow has the greatest concentration of 
creative industries in Scotland and one of the 
largest in the UK, outside London. The city is 
a hub of thriving creativity of all disciplines 
that is only growing bigger and better. 


'4'l{0>f76iy&2S2 


trend map 


Glasgow 


Glasgow is Scotland's primary 
centre of business and 
industry. As one of the top 20 
financial hulas in Europe, the 
city's corporate activity forms 
part of the backbone to the 
British economy 
Historically known as an 
industrial city, Glasgow was 
once a key part of both the 
shipbuilding and coal-mining 
industries, but since the 
Eighties, when the financial 
district was created, it has 
developed into a more 
cosmopolitan, diverse and 
leisure-focused location. 


Glasgow’s West End 
is the city’s culture and 
education centre 









































































































































































360innovate 


▼ www.360innovate.co.uk 

Web design, bespoke development and online marketing 
are at the heart of 360lnnovate; combining these skills and 
knowledge they are able to provide tailored and flexible web 
solutions to suit any online requirements. They believe that a 
website should be an invaluable marketing tool fulfilling a purpose, 
and this is always central to the company's approach. 




Alienation Digital 

www.alie n ation d igital. 

co.uk 

Alienation Digital was founded 
over 12 years ago through a desire to 
provide creative solutions in a digital 
world. Now a leading agency It has a 
client base that features both national 
and international brands. Asa full- 


service web agency they provide 
solutions from initial consultancy right 
through to delivery, marketing and the 
ongoing management of web projects. 




PoLR 

www.Dolr.co.uk 


The PoLR team are not afraid 
to admit they are gee ks - i n 
fact, they a re proud of it. They da i m 
to eat. breathe and sleep websites 
and can guarantee that they have 
many years of experience in the 
online arena. They provide web 
design, SEO, branding and 
copywriting services to get any client 
on the road to online success. 




Mucky Puddle 

www.muckypuddle.cam 

Mucky Puddle is a provider of professional website design and graphic design 



Recommended hotspots 



Zoe Spence, 
graphic designer 

The Glasgow School of Art 


The green' place in the city. It's extremely peaceful The Glasgow School of Art is one of Europe's most 
here, making it the ideal place to get away from the revered education Institutions that provides 
hustle and bustle. The acclaimed tropical glasshous- world-class creative education and research, 
es truly make this a Glasgow hotspot ! For me, the library Is a personal highlight. 



enjoy classic films, specially curated cinematic 
seasons or cult guilty pleasures than here. Cafe 
Cosmo Is perfect for a pre-movie coffee and natter. 
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Tclient directory 

Whether you need to hire web-desiqn services or i ust want to 


Get 

listed here 

Find out haw to add your agency to our cha rt 
by contacting the team at the following address: 

wAhrlMinnin^m ihlichiivi m nLr 


you need to nire weo-design services or .ust want to 
locate the trade's best creative teams, our chart can help... 




2Advanced Studios 

www.2advanced.com 

City Aliso Viejo \ Country USA 

Telephone 1949521700G l Twitter ID ^advanced 

Clients Adobe. Bacarc. Diesel 


aADVANCED 


i Established in 1999 .2 Advanced is an award winning interactive agency dedicated 
| to pushing the creative boundaries of design and technology to celiver high- impact 
i rich me<ta solutions. It boasts an exceptional reputation *n Adobe Flash design and 
: offers a host ct services Including Interactive design, CMS solutions, edommeree, 
l motion graphics, ZD llustration and video production. 



Addfctlvity 

Agency Republic 

AKQA 


London 

London 

London 

UK 

UK 

UK 

QB45 B3S6710- 

44 £020 79420000 

(0)20 7780 4736 


addlctlvlty 

agencyre public 

AKOA 

Hits chi Kickers, Motorola 

adldas. EA. BBC. BP, 02 

Coca-Cola. Vlrglic McDonald's, Nike. Visa, Xbox 



P.corn 


Angel London 


London 

UK 

0B4546B 0959 


angellondon 

Sony Pictures.Chelsea FC, MrV. ET 

AWP Uw Vtork 

wwwawiaiyMm 

New York 

USA 

607277 2757 


aWPNv 

Acodab. Comall University 


Azexis 


www.azeKis.com 

City ipswlch j Country UK 

Telephone01473 694500 : Twitter(D A2sxls 

Contact mm 

Clients BBC. Kla. Business Link, L&C 


©A 


XI 


t With a heritage In design and development since 1999. AzokIs Is an Interactive 
i agency with a talented team of specialists all sharing a single drive: to produce the 
l best design, web and mcfcile sdutSons. encompassing extraordinary functionality 
t and creative design. Ajexisorferg a diverse range of services and supports an 
i impressive array orf clients worldwide. 


rr* i*r 


BBH Global 
BGI ParlrefL 
Big Youth 
Big SpacesiHJ 
Birlt* 

Blitz 

.BIuElnfcAgeney.BanL 

0r*Mh* 365 
BURIN 

Carsonilied 
Catch Digital 
Chunk 
CHIPS 


www barll.ah/v*iti0.narry rj 

wiww hglparlnprs. ram 

wwlv mg'/ni ithfir 


wwwhlilrMPnrwnm 

wwwJjf.aiLhttjlS5.mni. 

m te, icataonltifidLcotn 

wwwcatfh^tfllfVMiL 

Mlr.jVhlrr=.-n./H-rriTi. 


London 

Chicago. IL 

Paris 

New York 

Stockholm 

Santa Monica. CA 

Grimsby 

Richnitma, Surrey- 

Bath 

London 


UK 

U5A 

Franco 

USA 

Sweden 

USA 

UK 


(0J20 77311672 
iaaa2B22iB7 
17I1B3IDO 
1 716 222 0 261 
4* C0>& 411577S 
3*O55i02M 
0790 ESSfl.144 
015122401831 
020 03327204 
01225 324 9BQ 
0207 494 3554 
0141353 0876 
Nfh 


hfitlagbgi partners enrn. 

Quota d i@ In I n yo I jr.hJf_. 


w.hlitjjgflnryramJaantart a 


inOaa'taf ent he 34i^,u.~tn 
www.hurnmnrkH inn rnmfcr.nl nd-us 


hen wni ca tiraffliipfi rfiri 

hallfugif uN-'hrilfill iil fww 


bbhlondon 

dlcJarfce 

N/A 

blgspsceshlp 

m 

BLITZagency 
BluHnlc Agency 
UjA 

BURNMARKE1ING 

caraonifled 

oatch^digital 

chunktwits 

chlpsny 


Aka, Baileys. LG, Sprite. HelneHen 

Burger Kina FedEx, Walt Disney 

AOL,5ony Ericsson, Nlvea. Orange 

Sony Pictures. MkrosoiL Victoria's Secret 

Red Bull. DD& Parrs, McDonald's, DHL.Telenor 

Activision. Coogle. Starbucks 

HHn Gericke, Nicholas Denklns.Crnni: Gregory 

Snatchi S Syialchi, Siemens 

bjLnwilji.com. efiny. 02, One Writer 

WA 

Orange, Heilman's. Crest Nicholson, Altitude 

Kfonenbdurg, Cadbury'a, Volvo 

lop Magazine. Jollrey. d’employ, Malt Creed 


Air 


Clearleft 

httP://clea rleft.com 


City Brighton j Country UK 

Telephone DG45-SZB 6163 : Twitter 10 dearleft 

Contact ijifr i tffiBp a rifr f r mm 

Clients WWR Universal Networks, Channel 4 Nows, Mozilla 


This. Brighton-based agency offers wxld class UX 
services, thanks to a stellar team of designers and 
developers specialising in understanding user 
requirements. Among tne team are experts like 
Andy BLKWL Richard Rutter and Jeremy Keith, Who 
r i £j * r a* e also respected speakers on the international 

C. led I conference circuit. 


0 



Cl pie* 


Los Angeles. CA 

USA 

1310 461 0330 


clplex 

Upper Deck. Von Dutch 

CodaH 

wwHfjadelj vi'n 

Reading 

UK 

44C0)iiB93Q6717 


cnde23 

Oasis Jtames. Sony Style. Adams Estates 

Content Formula 

MinurnnlanH^rmt ™i 

Lonjon 

UK 

020 7 3616671 

mnre^iFn^mnuntfbrTm xia*> 

contemlonnula 

Johnson ft Jc*mson. Krai t. flausen A Lomb 

Cool pm* 


Leeds 

UK 

441132018290 


coolpink 

Asda.NHS.'Warner Music. Hakords 

CnhRi New Media 


Rulilip 

UK 

01707394 962 

brnt^V-r^fln^mm- :i 

fJj'A 

Agenda Recruilinenl.Ocem Group 

Crcnre Dr.slgn 



UK 

01455 00 3700 


crearegnoup 

Nibty Clarke, Lile Music F-nundalinn, hreexr 

Crllienl Mnu 

www.j^dUcaiBiaM cam 

London 

UK 

02007358750 


crtElcalmaij 

R.-fci, NASA, NR Adidu 

d2x 


BiiiVijiLcKe 

UK 

07512 07S 360 


d2x_C0_Uk 

Altm.Walklngwprld 

Dare London 


London 

UK 

44(01203 451 9101 


tKslsdaje 

Sony Ericsson, Hwls, Tetley, Penguin 

Delete 


London 

UK 

0203 0 0 4 7155 


DeleteLonden 

Red Bull Decca Records 

Dlzzaln 


New Vcrk 

USA 

14 £20)32909911 


dlzzaln 

WebtMiset, Financial limes. HIS lextlles.QkLaO 

Digital Jigsaw 


London 

UK 

DE702354042 


dlgltaljlfisaw 

PepsiCo. Walkers. Budwelser 

Dtaltal MarmalKle 


Beckenham. Kant 

UK 

14 £0)20 B249 5655 


N/A 

Monarch, vsll.ccn*, 1 revor Serbia 

Disturb Media 


London 

UK 

020 7130 3569 


dlsturbmeidQ 

SwalchfMTV, Hertz 

Domanl StusAos 


New^ork 

U&A 

312 B502919 


domanlstudltK 

Sheraton. Porsche. VW 

DRIFTLAB 

imirwrliiHfahmn 

Atlanta. QA 

USA 

6782254351 

hDVHty 0mrlftlttbM.nl 

drlftlab 

General Molors.Ford. Sony 

eckhciCre.nl i'/e 

WWW i^blwr.3>i,j|.rnm 

Brijinl 

UK 

01179 070273 

InfnC'Wf lfhnf’'i*nl lw rnm 

itckhciCriNilive 

Rocknl MujicManagKfnenl.NezijjTV, ITV.CEF 

FI 

WL-*Gi rnwi 

H«« Writ 

USA 

212 0415220 

bl^r^-lriUlrnin 

FJ 

Gnngle, HTC, BBC, Fnx, Pdrache. Bur 1 nn, EA 

FriLborn 

www Nrytbom ,-r,m 

New York 

USA 

212 5B111D0 

ln£a#lh^rn rnm 

liriLbornn-yc 

Apple, Dorllnj, Pepsi, IMk-lgley 

Ruid Creativity 


Hyde,Cheshire 

UK 

OB45G5SS37J 

lnMfl»n. 1 ^rPj»ilvirym..tt. 

lluidcrealiivity 

American Soda, Brother, NHS 

Form 


Londen 

UK 

0207014 1430 

StblififS'rrwrvi 

N/A 

BBC, VHl r Cutty Sark Whisky 

■Glass Slipper 

V .. rjiftt.t.e.iiiiiierinrefflftiMe rwi 

Banbury 

UK 

01295724560 

tiiast.uinerinreryMkikrhm/rfinrfr php 

dpaultaylcr 

Nexus Interiors, bell systemz 

glue Isobar 

WWW nil iPki-ihsr r,-,m 

London 

UK 

020 77392345 

nwt b, ^ | ^ r j- n m. 

glue! so bar 

Oasis, the Sun 

GRi'DD 

nrdd.co.uk 

Londai 

UK 

020 77294222 

rna1l@firmacd.ii1t- 

GRDD.London 

PlayStartfcn. Warner Bros, Symantec. Nokia 

Guarllla 


Newcastle 

UK 

1401912619799 

—T"~‘--frQ- M < "° j "'* f 

we.are.fiuehBa 

Network One, Green Metropolis 

W-ReSI 

wwvr.hhrttE.na-l- 

London 

UK 

0207 729'3090 

InfriuTturocnc-l 

WA 

Chanel. DcfceS Gabbana. Nike 
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Featured agency: Azexis www . azexis . com 

A closer look at what each listed agency has to offer the community 


® 

S££ti 

& 

WpM#! 



Eased in Ipswich and boasting an impressive 12 years in 
the interactive business, Azexis offers creative services 
spanning web design, eCommerce, branding and graphic 
design- Characterised by the Azexis difference', the team 
places emphasis on strict design standards, maximising 
functionality, utilising in-house expertise, affordability 
and customer support. With a client list that includes big 
names such as the BBC and Kia, as well as serving up Its 
very own bespoke Eva nee CMS, this is definitely one firm 
to watch out for and consider working with in 2012- 



J'jy I Interactive 
Kohohaka 
Kudos Web Design 
KURD 

Liquid LiqhL 
bandy Dude 
Lounge Lij.ird 
Lyrical Metis 




5an Francisco, CA 

Gothenburg 

Manchester 

Long Beach. CA 

Brighton 

Stockholm 

New York 

Worthing _ 


9496100000 
031 Tit 54 SO 
0161236 S565 
562494.M70 
QE456 50B0 25 
46 7060996 02 
1-9SB-444-0110 
Q2DS1231567 



lusLInteractlve 

KOKOKAKA 

WA 

NJa 

litjuidllghLuk 

LondyOuckBTHLM 

ktinhmun 

LyrlcalMedla _ 


Sprite. Cisco. American Alrines, BMW, Adcfce 
Burberry. IKEA.VWan^ef 
Telia Pak Taboo 
WA 

Ant wards, Chnrcnl, Glfl'ord 
Pumn, New BnfanoK, Benlley 
Am wiers Online, Disney InEemcElvK: 

Virgin Atlantic, Ublsort _ 


*mv 


Mutado 

iHtp:Z/mula.d.Qjc.Qm 

City Milan | Country Italy 

Tel ephone 39 02 34592733 : Twitter IP mutado 

Clients Vodaton^ Vahool, Niks 


Mutado 


Mutado was formed in 20<M try Lorenzo Manfoedi and Mauio Gatti: a developer and a 
I graphic designer whose pattis crossed over a decade ago. During the last eight years, 
i It has grown into a sow independent digital agency, headquartered in Milan. The 
i company's name relates to Mutado's constant mutation, adaption and transformation. 



Next Digital 

wW.'.'JVSKLdiJitSLCO!)! 

Sydney 

Australia 

61 2 9336 7500 


nextdigital 

Brisbane Water, Qantas 



Night Agency 

ww w.n ig htagency.com 


X nightagency 


City New Yon? 

■ Telephone 2124311945 


: Country USA 
: Twitter IP mghcagercy 


Clients Champion, ESPN. MTV20tti Century Fox 


Located *i downtown NYC and founded In 2004. Night Agency is a 4S-person team 
offering creative and mariketlng solutions alongside a full repertoire of weir design 
services. Site building. eCommerce. UX planning. GUI design and Flash or iPhone 
development are just a tew of the areas where this agency excels 



North Kingdom 

w*wj»fWi!Ur)gdsfJMern- 

SheltefteS 

Sweden 

0207719 5353 


NerlhKIngdom 

Coca-Cola. Vodadone. adldas 

Nzfene 

,^u nTlmj nwn 

Nottingham 

UK 

0115 9509720 


nzlme 

Elastoplast. Mlcrosolt Game Studlosy Knox 

0Mde5KiN 

ivitiVJ .-miiu'clnn r.~i i iLr 

London 

UK 

0203246 2712 

ri'ntariftTA.dnnn.Ml. 

omdesign 

City cd London. Loft King. The Hokey Cokey Man 

Oancje Bus 


Newcastle 

UK 

0151241.3703 


®>oranget*j s 

Barclays. Sage Pearson 

Podl 


London 

UK 

020 7524 7660 


Podl 

Tesco. Shall. Kenwood 

POKE Lnrafcm 

nnk^lnnrlnn rin*n 

London 

UK 

2077495353 


pakrtanrinn 

Skyptr, Or.nnge, Ynhnnl 

Fbiorlish 


Sntiit. wa 

USA 

1206016 0900 


Raiqrtish 

ndiefas, Audi, Drll, 02 

Re active 

wwwrMdkw rnrT * 

London 

UK 

44(0320 7550 0200 


nr.ncLIverneriln 

Lee J^nns, British Airways,NEC 

ftssn 

uaaia-.resn.aijiz_ 

Wellington 

New Zealand 

64 43050705 

BHdiiBlnpTiaiHn nr> n? 

resn.lu^noj 

Toyota Racing, BlackBerrv, MTV 

SilisjileBitS 

http■ifolmiilPhltq rrwi 

Salem. MA 

USA 

N/A 

cnnract^yampl^hltrr^m 

slmpleblts 

MTV, AKA r Google. ESPN 

Slj&k Digital 

UVWVI OMtkffl Ilk 

Norwich 

UK 

01603630631 


SoaKDIgltal 

Axa, Harley DavIdsoaUEA, Archant 

Salld State Croup 


London 

UK 

0207613 7220 


soUdslategroup 

Sony, 5het Amnesty Internallonal 

Striker Multimedia 


Aberdeen 

UK 

01224 269 124 


StrlkerMmedla 

C-Platronn. Blueprint Iralnkig 

Sweden umimfled 


New York 

USA 

2129115904 


swedenunllmlted 

Vera Wang 

IAMB* internet 


London 

UK 

02030085110 


1AMRA.Internet 

Carphone Warehouse. EMI 

Tokyo Digital 


Liverpool 

UK 

01517Q&9624 


TokyoAgency 

GWR. Letterpool. MOBO. Samsung 

Tomato 

vyww.tomalffimuk 

London 

UK 

020749025^9 


N/A 

Citroen. Ford Ka. dunhlll 

Tribal DDB LA 


SanFrandsca CA 

USA 

415 732 3600 


TrlbalDDB 

Hasbro. McAfee, McDonalds 

ullranolr 

iron*... II r»nir mm. 

Paris 

France 

014 271 4R36 

nnllnelurm 

ullranptr 

*flny, HSBC, Peugenl, LacnsLis. Thomas Cook 




Underwired Amaze 

www.underwired.com 

City London | Country UK 

Telephone 020 7060 04100 : Twitter ID Luldorwir^d 

Contact tw lf p @ MrHj w rwiri p c ]^ »rr i 
Clients McCain Food*. Peugeot. Virgin. ASICS, M5PCC 


unsdesriMtisrexl 


Now part of the Amaze network of companies after a 2009 merger, Underwined was 
I founded as an agency 15 years ago. Started ty Rutti Brecher. Jason Holland and 
: -elix veiarde, It has become synonymous with customer angagoment campaigns 
: spanning website*, email newsletters, mobile application* and social media, 



(untitled) 

1 he value Engineers 
Vibe Creative 
VIvW Creative 
Weft heads 
Wevlo 
Wldfwtfweb 
Wleden+Ktrnnedy 
Your Majesty 
TheZnn AjJhticv 




..hf-n- rr ,.( 


V. Iiu. ^nviwnrconi 


LL'IuJuii 

Beacon slleld 

Shrewsbury 

SheMeld 

London 

New York 

London 

Amsterdam 

NtwYort 


OK 

USA 


HdlniKl 

USA 


Q207S71 7939 
01494 64*0999 
0845 263 7909 
0114 201 7060 
02072677060 
12125379432 
02071634999 
31.207126.500 
2126853427 
01412291313 


CanaulieunUUu 


^onoa ri&arc i~i "»rfi 



untitledlondcfl 

ValueEnglneerE 

vlbecreartlve 

Vivid, creative 

wefcheadsdlgltal 

Wevlo 

AnkJeWIckedweb 

WKAmsl«dnm 

yourmajiaLycc] 

ifinng-mcy 


IvdiLro. Spar, Lloyds TSB, Skv, Sony 
BP Orange, 5cmy 
E5J Jewellers Somerset Housing 
WA 

BBC, NHS. Texaco 
Samsung. IBM, Veriran 
Nectar, Kurt Geiger. NSPCC 
FA. Helneken, Nike 
htyundnl, Clsw\ Yahra>l 
Thu HALO Trust, Mockin's, Hillon 


LMentdireclory 
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■web 

designer Subscriptions Voucher 


YES! I would like to subscribe to Web Designer 


Your details 

Title_First name. 

Surname_ 

Ad dress_ 




Postcode 

Country 


Telephone number. 
Mobile number_ 


Email address._ 

Please complete your email address to receive news and special offers 

Direct Debit Payment 

UK Direct Debit payment 

I will receive my fltsl three Issues tor Just El, I will then pay only £25.15 every skK issues thereafter. If, however, I do not 
love what I i can cancel at any time, 



YOUR EXCLUSIVE READER PRICE 1 YEAR (13 ISSUES) 
r UK £62.30 (Save 20%) [ Europe £70 [ World £80 


Cheque 

r I enclose a cheque for £ _ 

(made payable to Imagine Publishing Ltd) 

Credit/Debit Card 

I Visa MasterCard I Amex [H Maestro 

Card number Expiry date 

11111111111111111 11111 

Security number ‘ I I (last three digits on the strip at the back of the cardl 

Issue number 1 [ Of Maestro) 


Signed,__ 

Date_ 

Code: PCG194 

C Tick this box if you do not wish to receive any promotional material from Imagine Publishing Lie 
G Tick this box if you do no! wfeh to receive promobonaf material from other companies. 

Terms, and conditions apply. We publish 13 issues-a year. Your subscription wil sort from the next available 
issue unless otherwise indicated. Direct Debit-guarantee details available on request. This offer expires 
without notice. 

I would like my subscription to start from issue: I I I I I 

Return this order form to: 

Web Designer Subscriptions Depart merit 800 Girillat Avenue, 

Kent Science Park, Sittingbourne, ME9 8GU r or email it to 

webdesi o nerf^se rviceh el pi ine.co.u k 
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How to maximise your hits, visits, views & uniques 



FANTASTIC 

SUBSCRIBER 

OFFER 

Subscribe today and 
get your first three 
issues for only£1 

fs Pay only £4.19 for every future issue 
- a 30% saving on the store price 
«• Free UK delivery to your door 
«• Never miss an issue 
F Money-back guarantee 


‘Terms & Conditions 

This offer entitles new UK direct debit subscribers to receive their 
first three issues for£l. After these issues, subscribers will then pay 
£25,15 every six issues. Subscribers can cancel this subscription 
at any time. New subscriptions will start from the next available 
issue. Offer code PCG194 must be quoted to receive this special 
s ubsoiption price Details of the d i rect debit guarantee are a vai I able 
on request, Offer expires31 May 2012, Imagine Publishing reserves 
the right to limit this type of offer to one per household. 

Source code: PCG194 

Web address: www.j maginesu bs co u k/wed 
Tel: 0844 848 8413 


Manage yaur subscription account online at wwwJmaginesubsxauk 




























































ISSUES OF 

WEB DESIGNER 

FOR JUST 




Get your first 3 issues for 
just £1, then save 30% 
on each future issue 


THREE EASY WAYS TO SUBSCRIBE 


1. Online 

Order via credit or debit card, just visit: 

vvwwJmaginesubsjCOJjk/wed 

and enter code PCG194 

2. Telephone 

Order by phone. Just call: 

08448488413 

Overseas: +44 CO) 1795 592 878 and quote code PCG194 


3. Post or email 

Please complete the form and post it to: 

Web Designer Subscriptions, 

800 Guillat Avenue, 

Kent Science Park, 

Sittingbourne, ME98GU 

Alternatively, scan and email the form ta 

webdesiqner@servicehelpline.co.uk 
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Our web-hosting guide is brought to you in association with 
Fasthosts, the UK's leading reseller web-hosting provider 

• Unlimited websites * Use your own brand throughout 

• Unlimited bandwidth * 24/7 expert U K-based support 

•Unlimited web space * No-risk trial - 3 months free 


Hosting listings 




Got a deal 
you think we 
should list? 


Whether you tea hosting firm Keen to promote your 
products or a ha ppy customer who wants a (avoir rl te 
provider to be listed, drop us a line with the details! 

we hripsinnertfsim a n i ne ■ n i ih lie hinn rn.i i k 


Keep an eye on the latest packages and 

deals with our comprehensive list of service providers 


NAME AND URL 


l&l 



1&1 Internet Ltd. 


161 Starter (Unux} 
161 Standard (Linux} 
161 Standard (MS) 
161 Unlimited (Linux) 
161 Unlimited (MS) 
161 Business (Linux) 
161 Business (MS) 



£29.08 5GB 

£59.08 50GB 

£71 .BB 50GB 

£83.88 Unlimited 
£10788 Unlimited 
£119. BB Unlimited 

E15&.BB Unlimited 


Unlimited 1.000 
Unlimited 3.000 
Unlimited 3,000 
Unlimited 5,000 
Unlimited 5,000 
Unlimited Unlimited 
Unlimited Unlimited 


Tmhr Unlimited Web Hosting 


UhlmBedWebHostbigtack N/A 
l_ Starter Wab Hosting Pack N/A 
BudgetWebHoedngPack N/A 
WbtfdPneas Web Hosting Pack N/A 
Drupal Web Hoslirig Pack N/A 

Jocmlal Web Hosting Pack N/A 
criGcminerte WebhtoCng tack N/A 
ZenCart Web Hosting Pack N/A 
Prffita5hopV/etiHo3trTg Pack N/A 


£60 Unlimited Unlimited Unllrnted 


£30 

£12 

£24 

£24 

£24 

£24 

£24 

£24 


5GB 

1GB 

5GB 

5GB 

5GB 

5GB 

5GB 

5GB 


2GB 

1GB 

2GB 

2GB 

2GB 

2GB 

2GB 

2GB 


100 

5 

100 

100 

100 

100 

100 

100 



2O20MMSI (a 


* iOiOmfcSa o 


2020 M?<Ma twww. 2 Q 2 dnMtfla.aanJ 
2020Me<»a Nww2Q2QmwMa«in) 
2 X] 2 nWe*aiV.'W'.v. 202 C'n^* 3 .c^iJ 
2d 20 Media tv 
ID Data Centres tnu 
4D Data Centred 
JD DciCa Centres 
4D RaLn tmlr« (vh 


4D Data Centres Cwww i 
Blackfoot Hosting Ltd*i 
Blackl&ot Hosting LI 
Blacktoet HOSlimii LI 
Blackroot Hosting LI 


Bnavo14 (t 
Hravol4 (FtHerVtaww 


4£M#) 


Bravo14 t bt tp JJtr a w l 4j ceuult] 
Bravol4 (t 
Hr-j'/cl'l l l 

Bravo14 f hl1 ™ 

□aiy ln(tn>*t *WWW, H^Hyrn . ,k? 
Da My Mite met miy. Hall yJin. u k'i 
Da uy Mile met t w M *w ^aMv* p. ul d 
Daiv Internet (w j«MU al L ^m.ulQ 


&1art*r 

Plus 

Pro 

Hus Pro 
Plus (M5) 

Pro (MS) 
BusPr&fMS) 

LlghL Ltrr 
Everyday 
Busme 55/Pro 
JAVA tomcat 
A5.Pivter 

Hrctue Package 

5luer Package 

Cold Package 

Titanium Package 

Reseller Package 

Home 

Business 

eCommerce 

Professional 

Minimus 

Medlux 

Maximus 

Starter Unusc 

Starter Wlndcws 

Business Linux 

Business Windows 

Ultimate Linux 

Ultima** Windows 

Entry 

Home 

Business 

Business Plus 

Starter 

Home 


OB45 BBS 0010 
OB45 0530010 
0045 0530010 
0B45B53001B 
OB15859O01B 

oijsessooia 

0B45B59001B 
QB70 221 2020 
0070 321 M>20 
0070 321 2020 
OB70 321 2020 
OB70 321 2020 
0845 166 B3B6 
OB45 166 B3B6 
0045 «6 0306 
0045166 0306 
0045106 0306 
N/A 
N/A 
N/A 
N/A 

35359 910 3072 

35369 9103072 

3S359 3i0 3072 

N/A 

NM 

N/A 

N/A 

N/A 

N/A 

0045 4SG 2100 
0045466 2100 
0045466 2100 
0B45466 2KJ0 
0B44 3729B4S 
0644 3225543 


E29.00 

£50.00 

£10788 

£179.88 

£5ftflS 

EIQ7.SS 

£179.88 

£45 

£100 

£275 

£300 

£275 

E40 

£64.99 

E79.99 

£14999 

£293.93 

£40 

£50 

£IDO 

£150 

£45 

E79 

£45 

£130 

£20 

£45 

£45 

£60 

£60 

E19.20 

£50.00 

£ 53.04 

E77.94 

£30 

£40 


IO0 

DOB 

10GB 

2008 

208 

SOB 

IDGB 

20MB 

200MB 

500MB 

10DMB 

100MB 

10MB 

20MB 

50MB 

5DOMB 

1GB 

500MB 

IGB 

2GB 

3GB 

10GB 

20GB 

3M& 

2.000MB 

2.DGOMB 

4JODOMB 

4.0OOMB 

Unlimited 

Unlimited 

500MB 

308 

12GB 

24GB 

3GB 

10GB 


5GB 
5030 
100GB 
Unlimited 
25GB 
50GB 
150GB 
1GB 
10GB 
2006 
30 B 
30 B 
5D0MH 
2GB 
2GB 
5GB 
10GB 
MB 
20GB 
4GGB 
60GB 
200GB 
4O0GB 
60MB 
2.000MB 
2.DOOMB 
4JDDOMH 
4.000MB 
Unlimited 
Unlimited 
5GB 
3008 
150GB 
25DGB 
20GB 
50GB 


20 

500 

750 

1.000 

100 

SCO 

1000 


500 

1.000 

5 

too 

200 

3O0 

Unlimited 

Unlimited 

Unlimited 

10 

10 

40OO 
40OO 
Unlimited 
Unlimited 
75 
30 
600 

Unlimited 

I.000 

10,000 
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Get your listing highlighted! Contact Richard 

Q richard.rust@imagine-publishing.co.ilk 
© +44(0)1202586436 hosting listings 


Featured host of the month: STRATO www.strato-hostina.co.Jk 

Offering more reasons for choosing one of the listed providers 

STR ATO i s Europe's second I argest web host with more than it comes to hosting packages STRATO breaks products into Basic and 

1.4 milli on customers i n six cou ntries. Boasting two flagship Advanced categories, each offering two solutions depending on your 

data centres certified to ISO 27001 - housing a staggeri ng 4 mi II ion requ ir enoent s- An entiy-fevel Basic Web plan is an affordable £4 per 

domains across over 40,000 servers - they pride themselves on month that comes with a free domain, 2GB of space and unlimited 

offering watertight levels of security and guaranteed service. When traffic, while the more expensive deals deliver some impressive extras. 



NAME AND URL 



Digital Gibbon Lid 
Digital Gibbon Lid 
Digital Gibbon Lid (http: 
Digital Gibbon 
DonHlnchecK 


DonHlncfieck ft* 

Donialneheck 
Domalncheck 
DnnhnxL ('.“".■■'±.r!nnhnr! .r-i.uk 3 


.d a im al P ic h aelhBMAi 




Business 

Windows Unlfcnlted 
Windows Home 
Cheap Hast 
Perianal 
Perianal Pius 
Business 

Business Professional 
Braize Linux 
Gold Linux 
Bronze Windows 
Gold Windows 
Rexeller Unix 
Reseller Windows, 
Enterprise 
Commerce 
Designer 
Developer 
Starter 

Wtual 

Bronze 

Silver 

Gold 

Platinum 

Email Only 


Euperinr 

Premium 

Starter 

Home 

Business 

eCommeree 


QB44 3729B4& 
OB-1-1 37Z961B 
0B11 372SB13 
0011 372 9B43 
01065 5B9 990 
01065 5B9 990 
01065565590 
01965565590 
0191 2612252 
0191 2612252 
0191 2612252 
0191 2612252 
0045226556* 
06452265566 
0915 2255666 
0B152265566 
0B15 226 5566 
0B15 226.5566 
0B11 999 4100 
0011 999 4100 
Oflll 999 4100 
0911 9994100 
01213114065 
01213111B65 
0121314 4665 
0121314 4B65 
02JB0219 B23 
02360 219 622 
02300 219 023 
02390 219 923 
NIA 
N/A 
NfA 
NfA 



£49 

£100 

£132 

EM 

EIDO 

£30 

£100 

£39999 

£19995 

£09,99 

EI79.99 

£11999 

EZ59.99 

E23.BB 

£5960 

£95.00 

£227.66 

£30 

E1Z 

02 

£114 

E40 

£75 

£140 

£260 

£29.99 

£54.99 

£79.99 

£159.99 


Unlimited 

5GB 

Unlimited 

100MB 

5D0MH 

100MB 

500MB 

Unlimited 

Unlimited 

iGB 


6M& 

200MB 

100MB 

BOOMB 

1,200MB 

IGB 


KJGB 

500MB 

2.5GB 

6.5GB 

30GB 


Unlimited 

Unlimited 

50GB 

10DMB 

Unlimited 

Unlimited 

Unlimited 

Unlimited 

IGB 

5GB 

IGB 

5GB 

Unlimited 

Unlimited 

266 

5GB 

2GB 

5GB 

25GB 

Unlimited 

UnllmILed 

Unlimited 

2GB 

5GB 

HGB 

40GB 

2GB 

5GB 

10GB: 

26GB 

IGB 

30GB 

Unlimited 

Unlimited 


KK50 

Unlimited 


Unlimited 

Unlimited 

260 

500 

250 

50O 

10 

50 

250 

Unlimited 

10 

20 

1043 

IQO 


Unlimited 

Unlimited 



Personal Standard 

0944 5830777 

£5388 

5GB 

Unlimited 

500 

/ 


S 

S 

/ 


✓ 

f 


Business Standard 

08445830777 

£95-88 

25G& 

uwmlted 

IjOOO 

S 

Option 

s 

s 

/ 

y 


f 


Business Premium 

0344 5830777 

£173.08 

50GB 

Unlimited 

UnfcritEd 

/ 


/ 

/ 

/ 

s 

/ 

t 

Fasthosts 

WD Starter Reseller 

0644 583 0777 

£149.99 

30GB 

Unlimited 

Unlimited 

/ 

option 

option 

/ 

/ 

s 

/ 

t 

www.fasthosts.co.uk 

Advanced Reseller 

0644 583 0777 

£199.99 

Unlimited 

Unlimited 

Unirrited 


Option 

Option 

/ 


/ 


* 


Heart Interne! (w 


w lwan i n Sa rftfl bc ami i 


Heart Interne! Ctfw wJw ar t l n tar-neLcQ.u l!2 
Heart In 
Heart In 
HmLwny 



ICUKw 

ICUKw 


Business Pro 
Starter Prolesslonal 
Home Prolesslonal 
Business Proressi^tal 
Reseller Professional 
Silver 
Gold 

Gold Plus 
Platinum 
Platinum Plus 
Email Plus 
Professional 
Advanced 
Enterprlxc 
Professional Plus 


08005127500 
OB15011 7750 
OB15011 7750 
OB45 644 7750 
OB45 644 7750 
00001001000 
O9O010O16BO 
00001801600 
09001001600 
OBOB IB01BB0 
OBOB 1801680 
OB45 0439 9175 
0045 0099175 
0045 0099175 
OB15M&&175 


£159 
E 29 jS 0 
EB9.99 
E 129.99 
£299.99 
£79.50 
£ 139.60 
£ 185,50 
£359,50 
E599.50 
£19.95 
£30 
£50 
£90 
£90 


100M& 

2.5GB 

1DGB 

Unlimited 

Unlimited 

150MG 

300MB 

4&QMB 

60QM& 

1.2GB 

50MB 

250MB 

2GB 

2GB 

500MB 


2GS 

KJGB 

50GB 

Unlimited 

Unlimited 

2GB 

6GB 

KK>6 

2M& 

40GB 

Nfa 

IGB 

2.5GB 

5DOMB 

6GB 


WO 

1,0430 

10.000 

Unlimited 

Unlimited 


Qplinn 

Option 

Option 

Option 

Option 

N/A 


Unlimited 

100 


NM 

aplifin 

oplion 

option 

option 


hosting Mings 
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Our web-hosting guide is brought to you in association with 
Fasthosts, the UK's leading reseller web-hosting provider 
•Unlimited websites • Use your own brand throughout 

• Unlimitedbaiidwidth • 24/7 expert U K-based support 

• Unlimited web space • No-risk trial - 3 months free 


Hosting listings 



Keep an eye on the latest packages 
and deals with our comprehensive list of service providers 

Discover what an enhanced 
listing can do for your 
business. Contact Richard oil 

0 + 44 ( 0)1202586436 

Continued-. 



NAME AND URL 


KUK w^- i.-., WmsJ lng.ro uk. 

•CUK w ww.ic u ith iMt lna.co. u k 
•CUK wwmsajkhostlna.-ec.uis- 
ICUK wwto hhostlnaaft uk 


JAB Web Hci5llnatwwrtJahrtPhhfiqMnn a 
JAB Web H 
JAB Web H 
JABlVeb Hnillngtauaas iahL^hhnqiinn o 
JAB Weta Hnsl ing {wm*]nhweh hm Ling xr 
LCN h 
PCW t* 

LCN h 
LCN (n 
LCN (1/ 

LCN f wiww Irnnnnnl 
LD H-nsls ( h Up<#l dh otlfci 


LD Hosts Ct 
LD Hosts ( h ttp: tf ld h OEtEJQ.Uk l 
LD H lists (HE 
Media Temple (ht 
Media Tcnyle i h U.pJ / j n »dla l *i m pl 
NameMng (wwiK n.-insnhogxifJ.j 

NameHog (wwwt n a nwh gfl ji at] 
NameHog (www .nar7Mrnaa.net] 
NameHog (ww w . n a rmh ag. n utl 




Premium Plus 
Enterprise Plus 
Reseller Windows 
Reseller Linux 
Reseller Enterprise 
Mail - UI05 
Home - HZ5 
Prilesslonal- P55 
Reseller - R25 
Reseller - R1Q5 
9H>g 
Starter 
Starter 
Dynamic 
Premium 
Unlimited 
LD Budget {Linux} 

LD Homettlnux) 
LDProtLInuK) 

LD Unlimited (Liws] 

Windows Home 

Windows Unimiled 

SIwed-Serwer Pro 

Shared-Server Advanced 

Starter 

Home Pro 

Business 

Reseller 


0045 009 9175 
0045 009 9175 
0&45M99175 
0845 M9 W5 
0845 0099175 
0300043 0153 
0000043 0I5J 
Q0OOO43 0153 
0000 043 0153 
0000043 0153 
01436-342430 
01436 342430 
01436 342490 
01436 342490 
01436 342 490 
01436 342 490 
07091235050 
OT8&123&&5S 
07891235858 
OTtSI235S5ti 
07691235656 
07091235S5S 
tl 310 6415500 
*1 31Q 64155 DO 
01004 213904 
01604 212904 
01604 212904 
01604 212904 



Names ca rwww name* rv-, i iL'i 

Startup Plus 

0645 363 3632 

£09.99 

500MB 

5GB 

to 

y 

/ 

j 

j 

/ 

y 

y 

/ 


Business 

Business Plus 

0045 363 3632 

00453633632 

£149.99 

£09.99 

2,000MB 

3.0ODMB 

20GB 

30GB 

KKl 

200 

X 

y 

X 

y 

j 

/ 

j 

j 

y 

y 

j 

/ 

j 

/ 

y 

y 


Designer 

designer Plus 

0045363 3632 

0045363 3632 

£239.00 

£479.08 

1GB 

Unlimited 

20GB 

3M& 

200 

Unlimited 

/ 

y 

y 

y 

y 

V 

y 

y 

y 

/ 

y 

y 

y 

y 

y 

/ 

Q[] NBTCeTERH 

DEVELOPER 

08000612001 

£3289 

1GB 

Unlimited 

500 

y 

y 

y 

y 

y 

y 

y 

y 

ONE 

08000612001 

£109,99 

5GB 

Unlimited 

1000 

y 

y 

y 

y 

/ 

y 

y 

y 

RESELLER 

0800 0&12801 

£274,89 

Unlimited 

Unlimited 

1000 

y 

y 

y 

y 

/ 

/ 

y 

y 

Netcetera www.netcetera.co uk 

VMSOO Server 

08000S12801 

£300 

20GB 

Unlimited 

Unlimited 

v 

y 

/ 

y 

/ 

y 

y 

y 


22D0DC Server 

0800061 2001 

£720 

160GB 

Unlimited 

Unlimited 

y 

y 

/ 

y 

/ 

y 

y 

y 


300ODC Server 

08000612001 

£1200 

2x500GB 

Unlimited 

Unlirited 

y 

y 

y 

y 

/ 

y 

y 

y 


260GQC£erver 

08000612001 

£1000 

2x500GB 

Unlimited 

Unlimted 

y 

y 

y 

y 

y 

y 

y 

y 


Shared 100 
V510Q 
VS200 
V63&0 

Dedicated Servers 

Email 

Pla v 

Plus 

R3 Reseller 

Redder* Design Starter 
Redder* Design Business 
Redden Design Premium 
Standard 1 
Standard 2 


02071000 434 

02071000 434 

02071000424 

02071000424 

03071000 424 

N/A 

N/A 

N/A 

N/A 

N/A 

OS43 2894425 
06432694625 
OB43 309 4625 
000 0 3217706 
0B00 321 77BB 


£60 

£600 

£ 1.000 

£2.000 

£3,0001- 

E25 


EfiAQ 

£18 

E59.B8 

£107.06 

£49 

£59 


1OOM0 

5GB 

10GB 

IKS 

73GG+ 

100MB 

100M6 

750MB 

2GB 

10GB 

1GB 

10GB 

100GB 

10MB 

20MB 


1GB 

5GB 

10GB 

&£KjB 
1.500GB 
IGB 
1GB 
5GB 
10GB 
500 B 
Unlimited 
Unlimited 
Unlimited 
2GB 
2GB 


J J J 
/ J / 
/ / / 
/ J / 
/ J / 


MM3 

Unlanlted 

10 

KHJ 

Unlimited 

1 
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SI RAID Hosting ft* 


5IRAIO EnterprlseWeb 

ooeooaoojDOTO 

£130 

50GB 

Unlimited 

6,000 

y 

X 

y 

/ 

y 

y 

y 

x 



Trial O month) 

0044 9411000 

UiA 

10GB 

Unlimited 

1.000 

y 

Option 

y 

y 

/ 

y 

y 

X 



Starter 

0044 9411000 

£23 60 

500MB 

Unlimited 

20 

y 

Option 

/ 

y 

y 

y 

y 

X 



PennniJ 

0044 9411QDQ 

£41.00 

3GB 

Unlimited 

500 

y 

Option 

y 

y 

y 

y 

y 

X 



Plus 

0044 9411000 

£71.00 

10GB 

Unlimited 

1,000 

y 

Option 

y 

y 

y 

y 

y 

X 



Multi site 

OB44 9411000 

£137.60 

2DGB 

Unlimited 

Unlimited 

y 

Option 

y 

y 

y 

y 

y 

X 

Swish Hosting !ww 


Email 

0044567 6971 

£13 


Unlimited 

Unlimited 

J£ 

X 

y 

y 

y 

y 

y 

y 

5wlsh Hosting (wj« 


Windows Hosting 

00445676971 

£66 


Unlimited 

Unlimited 

y 

/ 

y 

/ 

y 

y 

y 

/ 

Swish Hosting hue 


Lira/* Hosting 

00445676971 

£66 


Unlimited 

Unlimited 

y 

/ 

y 

y 

/ 

y 

y 

/ 



tCgrtimerpe 

0044567 6971 

£90 


Unlimited 

Unlimited 

/ 

J 

/ 

y 

j 

y 

y 

/ 

Swish Hosting (tnut 


Site Builder 

0044567 6971 

£12 


Unlimited 

Unlimited 

/ 

y 

/ 

y 

y 

y 

y 

y 



Switch Standard 
Switch Business 


0151236 Sill 
0151236 Sill 


50GB 

150GB 


500 

15D0 


Switch Media iwm 


Business Pro 

01512369111 

£34996 

20GB 

300GB 

5000 

y 

x 

X 

X 

y 

y 

y 

X 



Parting 

0070 7656364 

£5268 

25MB 

500MB 

15 

/ 

y 

/ 

/ 

y 

y 

y 

X 



For wand mg 

0070 7656364 

From £15 

N/A 

5DQMB 

tyA 

X 

X 

y 

y 

y 

y 

y 

X 



Hosting 

0070 765 6364 

From £7.50 

N/A 

M/A 

tit* 

X 

x 

X 

y 

y 

y 

y 

X 

IwentyHost fwwtv tLvenlynjjabjxuJrj 

0aslc55 

0045 6110776 

£21 

100MB 

1.500MB 

25 

/ 

/ 

y 

y 

y 

y 

y 

y 

IwentyHost (wj*iw 


SlandardBS 

0045 6110776 

£45 

200MB 

3,000MB 

so 

/ 

/ 

y 

y 

y 

y 

y 

y 

Twenty Host fwauatJ 


Busmess5S 

00456410776 

£70 

500MB 

7.500MB 

100 

/ 

/ 

y 

y 

y 

y 

y 

y 



AdwrmcodSS 

0045 6410776 

£110 

I.OOOMB 

isqooMB 

200 

y 

y 

y 

y 

y 

y 

y 

y 

VARIHOST feuuwja 

■rlhnri H-ll 

WocriPrnii Basic 

Q2Q9144 7057 

£47.90 

2GB 

10GB 

10 

y 

X 

X 

y 

y 

y 

y 

y 

VARIHOST (*w uJ 


WcrdPress Phi 

0200144 7057 

£7LB0 

4GB 

SGOGB 

100 

y 

y 

X 

y 

y 

y 

y 

y 


Word Press Extra 
Fusion Prolesslonal 
Fusien&uslnes* 

Fusion Oe'J'Clcrper 
Fusion Rrra^lkr 
Wind arts Starter 
Windows Prolesslonal 
Windows Starter Reseller 
Windows Snsmess Reseller 
£larl«r Pro 
Business Pm 
Ultimate Fra 


0200 144 7057 
0045130 I6D2 
0045130 l&OJ 
08451301602 
00451301602 
0044 35S 1450 
0044 3591450 
0044 1531450 
0044 5561450 
N [A 
N ft, 

NIA 


EliaSE 

£107.40 

£179.40 

£227.40 

£2-2!d.!dS 

£69.95 

EI4S.S5. 

EI99.S5 

E49S3S 

£10.99 

£46.99 

£79.99 


uufimlled 

5GB 

HKB 

2006 


Unlimited 

50GB 

150GB 

300GB 


Unlimited Unllmlled 

1GB 25GB 

4GB KHIGB 

5GB 25GB 

2QG& 200GB 


5GB 

10GB 

Unlimited 


40GB 

90GB 

Unlimited 


Unlimited 

1.000 

1.500 

5.000 

Unlimited 

100 

500 

500 

5.000 

50 

500 

Unlimited 
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Bronze (Llmix) 

0845 050 9000 

£47.88 

2GB 

20GB 

10 

/ 

/ 

y 

y 

y 

y 

y 

X 

'■HY- 

Silver (Linux) 

0845 050 9000 

£95.88 

5GB 

50GB 

25 

/ 

/ 

/ 

/ 

y 

y 

y 

X 

Fid J: 

Gold (Linux) 

0845 058 9000 

£143.88 

10GB 

100GB 

50 

/ 

/ 

/ 

y 

/ 

y 

y 

X 


Platinum (Linux) 

0845 058 9000 

£23988 

50GB 

250G6 

100 

/ 

X 

/ 

y 

/ 

y 

y 

X 


Reseller (Linux) 

0845 058 9000 

£479.88 

150GB 

500GB 

250 

X 

x 

/ 

y 

/ 

y 

y 

X 


Designer (Windows) 

0845 058 9000 

£59.88 

2GB 

20GB 


X 

x 

X 

y 

/ 

y 

y 

X 

Zen Internet www.zen.cauk 

Developer {Windows) 

0845 058 9000 

£179.88 

10GB 

100GB 


/ 

x 

X 

y 

y 

y 

y 

X 


Golden rules to top hosting We identify and explain the key criteria for success. 


The best 

resourcesforyou 

Selecting your ideal package is largely 
determined by me kinds, of resources and quantity 
of features you require from your Hosting solution. 
Key criteria like web space and mcnthly bandwidth 
are Important for those services likely to be 
suCfected to heavy amounts of traffic, which Is 
why package solutions for enterprise applications 
are typically much more expensive. The general 
rule o# thumb is not to buy more than you need or 
urxterestimate potential requirements,. 


Competitive 
and reliable 

The hosting market is big business and 
nosting providers do fey bodily prices down 
in a bid to entice your custom. Use our chat to 
compare costs, but be sure to visit tne vendor 
websrtes to keep track of the latest deals, as 
they change. Remember that low price should 
not akvays be a deciding factor and that paying 
a premium for a more reliable, trusted and 
experienced vendor can offer you much better 
value for money ii the long term. 


Putting you 
in control 

Modern hosting is Sll about giving 
customers the- power to set up, monitor and 
maintain their web space with minimal fuss. Most 
commercial vendors offer access to award winning 
and intuitive control panels that enable you to log 
in remotely and intuitively tweak your account 
without the need to relay complicated Instructions 
down the phone. Be sue to find out from your 
potential host as much as you can about the 
control panel and request a demo. 


Fantastic 
customer support 

ir si else tells and you need some 
extra help bo get your hosting back online'-, then 
a commitment to future customer support is key. 
Many vendors offer a service-level agreement 
which outlines what you can expect here, however 
most will be more explicit about whether phone 
support Is Included or email contact Is preferred. 
Think about what you need for peace of mind and 
factor good, comprehensive technical support 
against the price, 
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we 1o coding 


22-PAGE 

TECHNIQUE 

TAKEOVER! 


RESPONSIVE 

nKSllrN CANONESIZE 

>1 REALLY FIT ALL? 

LEARN HOW TO DELIVER ONE SOLUTION TO ALL 
DEVICES WITH THEBUZZ TREND ON EVERYONE^ UPS 

MEDIA QUERIES, FLUID LAYOUTS^ 
MOBILE APPS, ELASTIC WEB TEXT 
AND CONTEXT-AWARE IMAGES 


RESPONSIVE 

TjTh QTlrlxl CANONESIZE 
L/UlJlVJl 1 REALLYFITALL? 




LEARN HOW TO DELIVER ONE SOLUTION TO ALL 
DEVICES WITH THE BUZZ TREND ON EVERYONE’S UPS 

MEDIA QUERIES, FLUID LAYOUTS, 
MOBILE APPS, ELASTIC WEB TEXT 
AND CONTEXT-AWARE IMAGES 



RESPONSIVE 


DESIGN s 


MEDIA Q LTLRIL5, FLUID LAYOUTS, 
MOBILE APTS, ELASTIC WEB TEXT 
AND CONTEXT AWARE IMAGES 



WIDER WORDPRESS MODERNIZR25 GEOLOCATION 


Make your blog sites more adaptive with; specific 
tncks for creating responsive templates 


Develop next-gen frontends from the Master the new HTML5 methods and build 

back with this powerful JavaScript library location-aware mobile apps with PhoneGap 


Visit the WEB DESIGNER online shop at 

imagineshopco.uk 

for back issues, books and merchandise 


ALL IN YOUR LATEST 

Issue 195 on sale 

Thursday 5 April 2012 
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Uiebdesigner classified advertising 01202 586436 


GREAT 


DOMAIN 

OFFERS 



Cal! 0844 335 1211 or buy online www.1and1.CO.uk 


* Discount applies for the first year of regetration only. The second year and subsequent years will be charged at the standard prices. Visit 
Offers limited to 5 domains pet customer. Prices exclude VAT. 


ii foil promotional offoi details, terms and conditions. 










web designer 




Instant activation | FREE & fast customer support 


One-Click Script Installations 


99.99% Uptime 


Money 
Back Guarantee 


If you're not completely happy 
with our hosting then you get a full refund 


Planning World Domination? 

111 WebHost has the web hosting package for you: 


VAT 


per month 


Unlimited 

Web Hosting Pack 


•/ Unlimited Web Space 
/ Unlimited Traffic 

Unlimited Email Accounts 
•/ Unlimited MySQL Databases 
'Z Unlimited Sub Domains 
s Available on Linux & Windows 


www. 111WebHost.com for the full range 
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WifH ^ 

ftEUAgl^ 

SWltctS 


Everything you need to work 
better online from Fasthosts 

That’s not just a web-hosting package, a domain 
name, a virtuaL or dedicated server, broadband, 
hosted email or online backup. It’s a service your 
business can rely on. 

You'll get award-winning technology, but you'll also 
have the support of people who can help you work 
better online. If you need to call us, you'll find our team 
of IT experts happy and eager to help. It all adds up to 
a service your business can rely on. 

Find out how your business can work better online 

can free on 0800 6520444 
or visit www.fasthosts.co.uk 

You’ll find some great offers there too. 


fasthosts 



hosting | domains | dedicated &virtual servers | reseller hosting | online backup 


o 2012 AU rtRbtt Rwrwsf Rastfwsls and the ±asthosl« togc are- Madnmafk^o' FasUtwtLs Irmwrwt -td. 

’i rma & CondHkjrts dftptv- sat- websi Lu r ur details. 







web designer 




PostcodeAnywhere 

The easiest way to add features to your website. 

UK & international addressing ] Address cleansing 
Payment validation | Customer profiling 
Store finder 


To find out more: 

Call: 0800 047 0405 
www.postcodeanywhere.coni 




trade secret 

I Jll noun W "trad si kriht - A secret formula, method, or device that gives one an advantage over competitors. 

Low cost address lookup for your website 


Buy online from £15 


r "f 

_ f 

w * " 

mm 



Eliminate spelling mistakes 
Reduced abandoned carts 


+ 30% reduction of keystrokes entering add resses 

*4 Create a professional image for your clients 
Simple integration with SDK & working samples 


For more details visit postcode-software.net Or call 0845 8382 666 



yJ0?K ge^t- wU ^ 

WtfH 

$£oa (te 

TCCHHOLoCf 


Everything you need to work better 
oniine from Fasthosts 

That's net Just a weh-hosting package, a domain name, a virtual or 
dedicated server, broadband, hosted email or online backup. iit 5 s secure 
technology that protects your business 

There's lots to worry ahout when you run a business. But you don't have 
to wor ry abo ut the safety of your busl ness-critics l Information 

You don't even have to worry about the safety of the information that 
isn't that critical. Whichever service you choose from Fasthosts, you'll get 
the peace of mind that comes from secure, UK datacentres. 

Find out how your business can work better online 

can free on 0800 6520 444 or visit www.fasthosts.coMk 

You’ll find same great offers there too- 


T 




Fasthosts 




hosting | domains | dedicated &virtual servers | reseller hosting | online backup 


e 2Q12AJI right* nerved Pj*Mr«yUrtd the fttUu»«U logo jix- uarfemdrks tr nflstfwt* Imimct Utl 
Tertns & Gflrtaue#* apply. a* wchstte "or detail 
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Website 

hosting 


GO» 

COMPILA 


no risk, money back guarantee! 


tea | 


Read anything 
good lately? 


Shop for quality magazines, 
books and DVDs from 
Imagine Publishing 



imagineshop.co.uk E 


MAGAZINES BOOKS DVDS DOWNLOADS GIFTS 



1&1 UNLIMITED 

■ UNLIMITED Web Space 
and Traffic 

■ 1 Free .co.uk Domain 
Included 

■ MEW; 100 MySQL 5 Databases 

■ MEW; Up to £30 in Bing™ 
and Facebook* Vouchers 


FREE 


FOR 3 MONTHS 


then £6.99/m with 


l&1 BUSINESS 


UNLIMITED Web Space and 
Traffic 


NEW: Unlimited Access to 

65 Free 1&1 Clide & Build 

Applications 

MEW: 1 Dedicated SSL 

Certificate included 

MEW: Up to £50 in Bing™ 

and Facebook* Vouchers 


FOR 6 MONTHS 


then £9 3 9/mo nth 


.co.uk 

now only £2*49first year 

.co 

now only £9.99 first year 


1&1 DOMAINS 
starting at 


£ 2 


.49 


first year 


' VUit wiwwr ™ rjk foe full promotional 
ofler details:, terms and conditions, 

Pfk« exclude VAt. 


Call 

0844 3351211 


www.1and1.co.uk 
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Load the CD: 

Microsoft Windows 

We support Windows 7 unless 
otherwise stated. The CD-ROM should 
autorun once placed into your disc 
drive, if not., follow these instructions; 

I Browse to 
My Computer, 

I Right-click on 
your CD drive, and 
select Open from the 
drop-down list 
I Read the readme.txL if 
1 there is one present to 
find out which files you 
need to launch to run 
the interface. 

Load the CD: 

Mac OSX 

Up to OS X to, 7 (Lion) supported. 

This CD-ROM interface will NOT 
autorun when placed into your CD 
drive. Instead; 

I Double-click the CD 
icon on your desktop, 
i. Read the 'readme' file if 
j there is one present to 
find out which file you 
require to successfully 
run the interface. 


City Facebook 
Fan Page 
template 

From http://activeden.net 

A Facebook Fan Page is used to convert visitors 
into fans and this City Virtual Street template is 
here to help. The Flash-based interactive 
animation provides a platform for users to 
present and promote any urban business. 

The theme is fully XML customisable. 






I disc: pages 


This disc 
has over 


Your free,. 
resource disc 


contents 

On m Atotm 


Welcome to the Web 
Designer cover disc, a 
featurepacked CD 
containing a must-have 
collection of resources 
and tutorial assets 

Once again Web Designer has 
scoured the web and beyond 
looking for the best selection of 
design resources out there. This 
month's lineup includes the City 
Virtual Street Facebook template, 
the Lofty Word Press theme, 70 
social media icons, 32 oriental Ink 
brushes, 50 audio loops and the 
stylish Oaken Bucket font. 


mobile sites 

This issue's Design 
cloud brings together a 
collection of unmissable 
small-screen Uls 


tutorial files 

All the code and assets 
needed to complete 
this issue's workshops 


audio loops 

Soundsnap Cwww. 
soundsnap.com) 

provides an essential 
selection of music clips 
and sound effects 
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What would you like to see featured on your freeCD?0 webdesigner@imagine-publishing.co.uk 



Lofty WordPress theme 


50 music loops & FX 


Oaken Burk* f far t 


k & » S3- b 
P $ ® & & VI 

& ® ® ® ® y 

» tf » 

® @ » ®1 ! 


.. * 70 pearl social media icons 

* City Facebook Fan Page 
*82sLimi stroke brushes 

* ASS Menus Part 4 video 


Over _ 

as 


Pearl social 


media icon set 


I http://araDhicriver.net 


ISSUE 194 


Forts twww.nlcksfdnts. 
comlte inspired by the 
Victorian type Gakwood. It's 
a great font tor old-fashioned 
decorative work 


Disc problems 


82 sumi 

stroke 

brushes 


Oaken 
Bucket font 

Oaken Bucket from Nick's 


The lovely people at 
Photoshcp Tutorials fhttpi// 
rtiotoshootutoria IS.WS":- 
preside a set ot PS brushes 
created with sumi drawing 
Ink. These elegant brushes 
are available In sizes up id 
1,250px and compatible with 
Photoshop 7 and above. 


Lofty WordPress 
theme 

Fr orri LhttP://fth emes.com 

The Lofty WordPress theme from 
FThemes.com sits in the elegant 
magazine style category and comes 
with a range of handy features, The 
theme Is featured image ready, boasts 
space for 125 x 125px ads and is 5E0 
optimised. It adopts a two-cdumn 
layout, with right sidebar and a cool 
blue and black colour scheme. 


If the menu doesn't run or your disc is 
faulty, we will replace it free of charge. 
Drop an email listing the problem to 
WOy.tr? belp^ilmaQlae^pub! isblng. 

ccuik-Pleave don't send mail about the 
disc La the editorial team. If you a r c 
having problems getting the best out 
of programmer extras provided, then 
please contact the relevant vendor. 




This pearl pack comprises 70 individual 64 x 64px social media 
icons in the PNG format Included in the lineup are all the usual 
suspects - Twitter Facebook, WordPress, Flickr. Google and 
YouTube - plus a whole host of essential services. A single PSD 
includes all the icon elements allowing for easy customisation. 


,aniL 




minutes of HTML5, CSS3 and ActionScript video tutorials 







AS3 Menus 

The fourth part In this five-pari series takes 
a look at parsing XML in Flash, loading 
external files, listing component events 
and dynamic text. 

Fr : i www.cartoonsmart.com 


KMJJHSrm COM 


MTMt-d. CIS) * JCkwv 


HTML5, CSS3 & jQuery 

The latest collection from KillerSites 
takes the viewer through the steps 
needed to convert from XHTML to 
HTML5 utilising CSS3 techniques, 

Fron www.killersites.com 


Find more free tutorial content at© www.webdesignennag.co.uk 
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Salisbury's 


Frames 

This Is a page-building 
technique that has been 
sent down the annals of 
internet history. Popular 
in the late Nineties, a 
selection of frames 
contained different 
documents - eg top.htmL 
content.html. etc - to 
make up a page. They 
could be difficult to use 
and are no longer 
supported, thankfully. 


Load 

time! 

Page slze^ 206KB 


30 




seconds 
ona 56 kbps 

connection 









IB 1 CI;:!.[ 

iml" niiil 1 'll mu l ||: 


Sninshun 


Web 


Yuurt huncc to wm tftOOORe^riJ 



Why not let us doyour \ho|ipi foiyou? 

Ai San4ti#y'a wfHnshsfr iJ'kflne m* sonaimg n**c wnfmsn itMSfla (6 Uf than 
■tape** 

approach SalmfriMyi Di4tflhM. 

Wn*d yjnj H*«*m !h« bn* V fOu jJIt feflt *t*l hie* I, Ml to yfcH iHcpprq >M 
yto StMikbufy t Oftoiito it ji itoul cl*K* tod tunw*n^oc*. ig you'w IN** 
*< #m La (toe* yw «4* - by ite Un v th* IhL»im*( You tin If mu 
JrOin ihopp** bg«n |h* «|grg « *«U «W«m 4 lO yw bgmg 


TooeJebnite n vem^of 




^Pflagazinc 


w^iv asm# iiJ lour 
iwiwinw iu-*iKv 
. \*01U' 

dilimiy problems 

Kmm! tiswtlh yimf qur-HtHW* unw. 


Diwv i miss i*j 

an the till 
JJ day out 
J Jbr pet lov 

|ow. in at ftir (Vtr IVti 
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Tables 

The main content is 
made up of images 
which are arranged and 
placed inside tables to 
create the final layout. No 
cellspacing, cellpadding 
or borders are added set 
the design is very clean. 



Web 

design ; - 
relic 


Inline styling 

Before the days of CSSand separate stylesheets, any styling 
was typically applied inline (in the HTML). The sidebar in this 
1999 example uses tables and applies the font size, vertical 
alignment and colour to each element Inline, like below: 

mi <TH VALIGN=TCPXTD HEIGIfT= r ’20” VALIGM=”bottom ,r xFOhT 
SIZE=”l”>&ribsp ;&nbsp;</FQNTXA HREF=”linkaddress ft 
TARGET= JJ _top”xFQNT FACE=”verdana" CQLQfi=”#FFFFFF” 
SIZE^l^XBfrTMs Week 1 5 Offers</FONTX/AX/TDX/TR> 



Sainsbury’s www.sainsburys.co.uk 

The supermarket chain was quick to join the internet revolution, providing some 
great examples of what the web can bring to retail back in the Nineties 



Sainsbury’s Is synonymous with the British 
supermarket industry and Is one of the oldest in 
the world, founded by John James Sainsbury in 
1869. Ever a market leader the chain was quick to 
sign up to the internet back in the mid-Uineties. 

Its first foray on to the web in 1996 was very 
much of its day with simple graphics and a basic 


layout 1998 saw a redesign and the addition of a 
tabbed Interface, which was ahead of its time, but 
the execution back then was very different to the 
format that's popular today. 

Stepping forward to 1999 the supermarket chain 
produced the first incarnation of its website that 
could be said to have persisted to this day. 


i * I Its first foray on to the web in 1996 
was very much of its day with simple 
graphics and a basic layout ill 
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infinissrv 

limitless imagination 





We’re offering a new take on virtualisation. You think it, we provide it. 

Infiniserv's virtualisation and cloud computing offering provides a fast and totally 
flexible solution for your organisation. And it’s fully supported by C4L’s ultra-fast 
private network and support that’s second to none. 


www.infinisErv.com 








